css selectors - CSS select first element with a certain class

Question

What is the syntax for selecting the first element with a certain class? Please specify whether that method of selection is part of CSS3 or CSS2.1.

Answer 1

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.