CSS – First child without certain class

by

This question is similar to CSS selector for first element with class, except for the first element without a class. As mentioned, :first-child:not(.ignore) represents an element that is the first child of its parent and does not have the class “ignore”, not the first child matching the rest of the selector.

You can use the overriding technique with a sibling combinator that I’ve described in my answer to the linked question, replacing the class selector with the :not() pseudo-class containing a class selector:

.common-class:not(.ignore) {
    /* Every span without class .ignore, including the first */
}

.common-class:not(.ignore) ~ .common-class:not(.ignore) {
    /* Revert above declarations for every such element after the first */
}

More Related Contents:

  1. Is there a CSS selector for elements containing certain text?
  2. What does the “~” (tilde/squiggle/twiddle) CSS selector mean?
  3. ::slotted CSS selector for nested children in shadowDOM slot
  4. nth-child doesn’t respond to class [duplicate]
  5. Select elements by attribute in CSS
  6. Nesting CSS classes
  7. CSS attribute selectors: The rules on quotes (“, ‘ or none?)
  8. Matching an empty input box using CSS
  9. What is the difference between a pseudo-class and a pseudo-element in CSS?
  10. Is the CSS :not() selector supposed to work with distant descendants?
  11. What is the difference between ‘>’ and a space in CSS selectors?
  12. What does “i” mean in a CSS attribute selector?
  13. Combining :last-child with :not(.class) selector in CSS
  14. Why can’t you group descendants in a CSS selector?
  15. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  16. Not CSS selectors
  17. CSS Selector for nth range?
  18. What is this CSS selector? [class*=”span”]
  19. Is there any pros and cons if i use always CSS Class instead CSS ID for everything?
  20. Is there such a thing as an “all inclusive sibling” CSS selector?
  21. CSS selector involving pseudo class first-child and dropcap
  22. Targeting position:sticky elements that are currently in a ‘stuck’ state
  23. Select odd even child excluding the hidden child
  24. Is there an opposite CSS pseudo-class to :hover?
  25. Comma in CSS, multiple selectors using the same CSS
  26. CSS select first element with a certain class
  27. Correct terms and words for sections and parts of selectors
  28. How can I use/emulate regex-like backreferences in attribute selectors?
  29. CSS class repetition to increase specificity
  30. select second child

Leave a Comment