Selected the first instance of a class without knowing position under parent

Question

I'm trying to always select the first element with the class ".chartKeyListItem". It is under the parent "chartKey". So this works great with the first-child selector if it is the first element but sometimes I have 3 items before it so I'd have to use the nth-selector(4) this works for that instance. But my code should be able to handle both without breaking eachother. (Which it does if both CSS classes are loaded in because for the first instance it targets the 1st and 4th "chartKeyListItem") Is there a way to just only select the first ".chartKeyListItem"?

Also, the amount of chartKeyListItem divs is not definite and can be anywhere from 2 to 20 and the MinMax labels will only show up for some pages but the CSS needs to be able to handle when they're are there and when they are not...

Code below: Instance 1:

<div class='chartKey'>"
    <div class='chartKeyListItem'> //Just want to add margin to this one
    <div class='chartKeyListItem'>
    <div class='chartKeyListItem'>
    <div class='chartKeyListItem'> //THIS ONE GETS BOTH CLASSES WHICH I DONT WANT
</div>

Instance 2:

<div class='chartKey'>"
    <div class='pollResultsMinMaxLabel' style='width:auto;float:left;margin-left:20px;'>Min</div>
    <div class='pollResultsMinMaxLabel' style='width:auto;float:left;margin-left:20px;'>Max</div>
    <br/>
    <div class='chartKeyListItem'> //Just want to add margin to this one
    <div class='chartKeyListItem'>
    <div class='chartKeyListItem'>
    <div class='chartKeyListItem'>
    <div class='chartKeyListItem'> //This one will get both class too
</div>

CSS:

.chartKeyListItem:first-child{
     margin-left: 60px !important;
 }
.chartKeyListItem:nth-child(4) {
     margin-left: 60px !important;
 }

score 3 · Accepted Answer · edited May 23 '17 at 12:08

3

For this, you would need some sort of first-of-class selector which sadly we don't have yet. However, you can achieve the same effect :)

.chartKeyListItem {
   margin-left: 60px !important;
}

.chartKeyListItem ~ .chartKeyListItem {
   margin-left: 0 !important;
}

How it works: you are styling the class, and then any instances of that class that are preceded by that class are over written with 0 margin-left. You can find out just how ~ works here.

edited May 23 '17 at 12:08

Community

1
1

answered Mar 13 '13 at 14:38

Andy

14,427
3
52
76

+1 Andy is right, you cannot **yet** target the first instance of a .css-class. So you have to target all others. – Milche Patern Mar 13 '13 at 14:44

Selected the first instance of a class without knowing position under parent

1 Answers1