I have a wordpress site where the divs are ID’s and cant just make the one background color black. I have tried :nth-child(1) and :nt-child(3) but its not working. And I cant change the ID’s as its part of the theme.
Just want to make the 1st one and last one have a background color of black. Even tried
#page-services:nth-child(odd) {
background-color: #000;
}<div id="page-services">
<div class="divider-xl"> text </div>
</div>
<div id="page-services">
<div class="divider-xl"> text </div>
</div>
<div id="page-services">
<div class="divider-xl"> text </div>
</div>1
this is because nth:child selector is not ment to be used for IDs. The point is, you can have multiple elements with same class but element IDs need to be unique and specific to one and only one element. (Multiple elements with same ID is not valid html)
Cause more ID selectors with same name are not semantic.
Use:
Using nth-child:
HTML:
<div id="container">
<div class="box" id="box1">text</div>
<div class="box" id="box2">text</div>
<div class="box" id="box3">text</div>
</div>
CSS:
#container .box(nth-child)....
or
#container div(nth-child)....
10