Nth-child selector does nothing for second child

Nth-child selector does nothing for second child


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 h4:nth-child(1) {

#onOff h4:nth-child(2) {

<div id='onOff' class='flex-row'>

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?


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


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


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


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