Nth-child selector does nothing for second child

Nth-child selector does nothing for second child
0.0 0

#1

I am using the :nth-child() selector to choose the second child element under a div. I used this child selector for the first child under this div and it worked succesfully, but now I’m trying to use it for a second child and it’s not working, I don’t know why and would appreciate any help with this. Here is my code :

#onOff{
  height:100%;
  width:100%;
  justify-content:space-evenly;
}

#onOff h4:nth-child(1) {
  margin-top:5px;
}

#onOff h4:nth-child(2) {
  margin-top:5px;
}

<div id='onOff' class='flex-row'>
               <h4>Off</h4>
               <div>
               </div>
               <h4>On</h4>
</div>

Here is a link to the codepen I’m working on: https://codepen.io/icewizard/pen/JLBpNQ

Also I am using display flex in a row on the parent div here, I’m not sure if this is stopping the child selector to not work on the second child.

I wanted to move the child h4 elements here closer to the center of the div that is between them. I was going to use margin-left and margin-right to move them, but I noticed that is pushing my entire div out of place from the center. Is there a better way I should use to move the h4 elements closer to the center?


#2

The second h4 element is the 3rd child of it’s parent.


#3

Thank you. I thought putting the h4 in front of it I could ignore the div that is second in order.


#4

Looks like you can do that with the :nth-of-type() selector.


#5

Yes, thank you, this work how I wanted the nth-child selector to work.