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?