Select first child with given class (CSS)
css, css-selectors, html
Solution
You should be able to capture only the elements with `.class1` and no other using this selector:
li[class="class1"]
You won't be able to match only the first out of these elements because there isn't a selector to do that. `:first-child` only selects the very first child within the `ul` regardless of what classes it has, and `:first-of-type` selects the first `li`, also regardless of its classes (effectively making it the same as `:first-child` for `li` elements). You'll have to use the technique given here (where it also explains why these two pseudo-classes don't work) to apply the rule to all such elements then undo it for subsequent ones:
li[class="class1"] {
/* Apply styles... */
}
li[class="class1"] ~ li[class="class1"] {
/* ... and remove them after the first */
}
Note that the same selector is used so both classless elements and elements with `.class2` are completely unaffected.
This jsFiddle demonstrates the desired effect with the provided HTML: http://jsfiddle.net/Cmypc/4/
Problem
we have a partial html: ``` <ul> <li class="class1">AFFECTED</li> <li class="class1 class2">NOT</li> <li class="class1">NOT</li> </ul> <ul> <li class="class1 class2">NOT</li> <li class="class1">AFFECTED</li> <li class="class1">NOT</li> </ul> <ul> <li>NOT</li> <li class="class1">AFFECTED</li> <li class="class1">NOT</li> </ul> ``` I need a universal css-selector for the first li's of any list with only class1. - li's with extra classes (class2) MUST NOT be affected. - only first li with class1 should be selected (to change the appearance of A. - no JS/jQuery. - li's are float, so no hard coded nth-child. - code is generated automatically, so no way add/remove custom classes. I've tried to use :not(class2), [class2] :first-child & :first-of-type but with no avail. Thanks! Solution: http://jsfiddle.net/6hxZa/3/