CSS selector to select first element of a given class

by

CSS3 provides the :first-of-type pseudo-class for selecting the first element of its type in relation to its siblings. However it doesn’t have a :first-of-class pseudo-class.

As a workaround, if you know the default styles for your other .A elements, you can use an overriding rule with the general sibling combinator ~ to apply styles to them. This way, you sort of “undo” the first rule.

The bad news is that ~ is a CSS3 selector.
The good news is that IE recognizes it starting from IE7, like CSS2’s >, so if you’re worried about browser compatibility, the only “major browser” this fails on is IE6.

So you have these two rules:

.C > * > .A {
    /* 
     * Style every .A that's a grandchild of .C.
     * This is the element you're looking for.
     */
}

.C > * > .A ~ .A {
    /* 
     * Style only the .A elements following the first .A child
     * of each element that's a child of .C.
     * You need to manually revert/undo the styles in the above rule here.
     */
}

How styles are applied to elements is illustrated below:

<div class="C">
    <!--
    As in the question, this element may have a class other than B.
    Hence the intermediate '*' selector above (I don't know what tag it is).
    -->
    <div class="B">
        <div class="E">Content</div> <!-- [1] -->
        <div class="F">Content</div> <!-- [1] -->
        <div class="A">Content</div> <!-- [2] -->
        <div class="A">Content</div> <!-- [3] -->
    </div>
    <div class="D">
        <div class="A">Content</div> <!-- [2] -->
        <div class="E">Content</div> <!-- [1] -->
        <div class="F">Content</div> <!-- [1] -->
        <div class="A">Content</div> <!-- [3] -->
    </div>
</div>

  1. This element does not have class A. No rules are applied.

  2. This element has class A, so the first rule is applied. However it doesn’t have any other such elements occurring before it, which the ~ selector requires, so the second rule is not applied.

  3. This element has class A, so the first rule is applied. It also comes after other elements with the same class under the same parent, as required by ~, so the second rule is also applied. The first rule is overridden.

More Related Contents:

  1. Is there a CSS parent selector?
  2. What do commas and spaces in multiple classes mean in CSS?
  3. Complex CSS selector for parent of active child [duplicate]
  4. Select every Nth element in CSS
  5. CSS3 selector :first-of-type with class name?
  6. CSS Selector that applies to elements with two classes
  7. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  8. CSS selector based on element text? [duplicate]
  9. Should I avoid using !important in CSS?
  10. CSS: How to say .class:last-of-type [classes, not elements!] [duplicate]
  11. Pure CSS checkbox image replacement
  12. Handling a colon in an element ID in a CSS selector [duplicate]
  13. How to write a CSS hack for IE 11? [duplicate]
  14. CSS selector for attribute names based on a wildcard
  15. IE8 :nth-child and :before
  16. Invalid CSS selector causes rule to be dropped: What is the rationale?
  17. Style child element when hover on parent
  18. How to select the first, second, or third element with a given class name?
  19. Combine :after with :hover
  20. What does the dot mean in CSS?
  21. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  22. :active css selector not working for IE8 and IE9
  23. What is this CSS selector? [class*=”span”]
  24. Is there any pros and cons if i use always CSS Class instead CSS ID for everything?
  25. Is there such a thing as an “all inclusive sibling” CSS selector?
  26. Multiple descendant children selector with css [duplicate]
  27. Is there an opposite CSS pseudo-class to :hover?
  28. Comma in CSS, multiple selectors using the same CSS
  29. CSS class repetition to increase specificity
  30. select second child

Leave a Comment