CSS select first element with a certain class

by

If you need the first element with a certain class among its siblings, you can use

.myclass {
    /* styles of the first one */
}

.myclass ~ .myclass {
    /* styles of the others (must cancel the styles of the first rule) */
}

Don’t try to use .myclass:not(.myclass ~ .myclass) to do this in only one rule, it won’t work since :not() only accepts simple selectors in the parentheses.

If you want the first .myclass in the whole document, there is no way to do it with CSS alone.

The :nth-of-type() or :nth-child() approaches posted are wrong, even if they coincidentally happen to match the elements you want in your page.

Browser support of sibling selector (~): IE7+ and all others.

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. CSS Child vs Descendant selectors
  6. Select elements by attribute in CSS
  7. Nesting CSS classes
  8. CSS attribute selectors: The rules on quotes (“, ‘ or none?)
  9. not:first-child selector
  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. Combining :last-child with :not(.class) selector in CSS
  13. Why can’t you group descendants in a CSS selector?
  14. What does + mean in CSS? [duplicate]
  15. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  16. Not CSS selectors
  17. What is this CSS selector? [class*=”span”]
  18. Is there any pros and cons if i use always CSS Class instead CSS ID for everything?
  19. Is there such a thing as an “all inclusive sibling” CSS selector?
  20. CSS selector involving pseudo class first-child and dropcap
  21. Targeting position:sticky elements that are currently in a ‘stuck’ state
  22. Select odd even child excluding the hidden child
  23. Is there an opposite CSS pseudo-class to :hover?
  24. Select all ‘tr’ except the first one
  25. Comma in CSS, multiple selectors using the same CSS
  26. Correct terms and words for sections and parts of selectors
  27. What CSS selector can be used to select the first div within another div
  28. CSS Selector for not a child of element type?
  29. :last-child pseudo-class mixed with attribute selector not working
  30. CSS selector based on width?

Leave a Comment