Showing a div when the parent container has more than 2 elements-CodePudding

I have a situation in which I show a div with an action ONLY if the parent container has two child elements. ala.

 <div className={styles.parentContainer}>
    <div>some info</div>
    <div>some other info</div>


    <div class={styles.myActionDiv}>MY ACTION DIV </div>
 </div>

I am showing the children via react. So, I only show them if certain conditions arise. But, I want that last div to ONLY show if the container has 2 or more divs.

I was doing this, but didn't work:

.parentContainer {

  .myActionDiv {
    display: none;
  }

  div:nth-child(n 2) ~.myActionDiv {
    display: block !important;
  }
}

CodePudding user response：

use this

.parentContainer {

  .myActionDiv {
    display: none;
  }

  div:first-child:nth-last-child(2),
  div:first-child:nth-last-child(2) ~ .myActionDiv {
    display: block;
 }
}

also use className instead of class in the div