0

I have this CSS:

#allStuff > div > div > div > div:nth-child(2) > div > div > div > h3:nth-child(3) {
border-top:1px solid #ffffff6b;
padding-top:8px;
}

#allStuff > div > div > div > div:nth-child(3) > div > div > div > h3:nth-child(3) {
border-top:1px solid #ffffff6b;
padding-top:8px;
}

#allStuff > div > div > div > div:nth-child(4) > div > div > div > h3:nth-child(3) {
border-top:1px solid #ffffff6b;
padding-top:8px;
}

#allStuff > div > div > div > div:nth-child(5) > div > div > div > h3:nth-child(3) {
border-top:1px solid #ffffff6b;
padding-top:8px;
}

The only difference is the first nth-child(x); what's to correct way to create this selector so that I can only create a single selector to cover all of them?

i.e. something similar to this (which I know is wrong, but demonstrates what I mean):

#allStuff > div > div > div > div:nth-child(*) > div > div > div > h3:nth-child(3) {
border-top:1px solid #ffffff6b;
padding-top:8px;
}
J. Scott Elblein
  • 4,013
  • 15
  • 58
  • 94
  • @Joseph Unfortunately those selectors were copied from the Chrome inspector. I don't have access to the page's source itself to make permanent changes. I'm adding my tweaks via something like stylus. – J. Scott Elblein Jul 08 '20 at 01:26

1 Answers1

1
  • Use :nth-child(n) if you want to cover all the numbers (1, 2, 3, 4, 5, ... n)

    Quick example:

       
       p:nth-child(n) {
         color: red;
       }
       
       
       
       <p>Cameras are watching us</p>
       <p>Cameras are watching us</p>
       <p>Cameras are watching us</p>
       <p>Cameras are watching us</p>
       <p>Cameras are watching us</p>
       <p>Cameras are watching us</p>
       
       
  • Use :nth-child(-n+5):not(:first-child) If you want to cover only from 2 to 5 (just like in your example)

    Quick example:

       
       p:nth-child(-n+5):not(:first-child) {
         color: red;
       }
       
       
       
       <p>Cameras are watching us</p>
       <p>Cameras are watching us</p>
       <p>Cameras are watching us</p>
       <p>Cameras are watching us</p>
       <p>Cameras are watching us</p>
       <p>Cameras are watching us</p>
       
       
Alberto Rhuertas
  • 733
  • 4
  • 12