Question 406062 in Html Question posted in
Some basic documentation can be found here.

Html – Why is my :nth-child not working on my ID selector

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>
Tags:

2

Answers


  1. 0

    Cause more ID selectors with same name are not semantic.

    Use:

    #your_container div:nth-child…

    Or try to edit ID’s in jQuery.

    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)....
    Login or Signup to reply.
  2. 0

    ID’s must be only used once per page. Change the ID to a class.

    .page-services:nth-child(odd) {
  background-color: lightblue;
}
    <div class="page-services">
  <div class="divider-xl"> text </div>
</div>

<div class="page-services">
  <div class="divider-xl"> text </div>
</div>

<div class="page-services">
  <div class="divider-xl"> text </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search