Css Selector to Select First Element of a Given Class

CSS selector for first element with class

This is one of the most well-known examples of authors misunderstanding how :first-child works. Introduced in CSS2, the :first-child pseudo-class represents the very first child of its parent. That's it. There's a very common misconception that it picks up whichever child element is the first to match the conditions specified by the rest of the compound selector. Due to the way selectors work (see here for an explanation), that is simply not true.

Selectors level 3 introduces a :first-of-type pseudo-class, which represents the first element among siblings of its element type. This answer explains, with illustrations, the difference between :first-child and :first-of-type. However, as with :first-child, it does not look at any other conditions or attributes. In HTML, the element type is represented by the tag name. In the question, that type is p.

Unfortunately, there is no similar :first-of-class pseudo-class for matching the first child element of a given class. At the time this answer was first posted, the newly published FPWD of Selectors level 4 introduced an :nth-match() pseudo-class, designed around existing selector mechanics as I mentioned in the first paragraph by adding a selector-list argument, through which you can supply the rest of the compound selector to get the desired filtering behavior. In recent years this functionality was subsumed into :nth-child() itself, with the selector list appearing as an optional second argument, to simplify things as well as averting the false impression that :nth-match() matched across the entire document (see the final note below).

While we await cross-browser support (seriously, it's been nearly 10 years, and there has only been a single implementation for the last 5 of those years), one workaround that Lea Verou and I developed independently (she did it first!) is to first apply your desired styles to all your elements with that class:

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

... then "undo" the styles for elements with the class that come after the first one, using the general sibling combinator ~ in an overriding rule:

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

Now only the first element with class="red" will have a border.

Here's an illustration of how the rules are applied:

.home > .red {
    border: 1px solid red;
}

.home > .red ~ .red {
    border: none;
}

<div class="home">
  <span>blah</span>         <!-- [1] -->
  <p class="red">first</p>  <!-- [2] -->
  <p class="red">second</p> <!-- [3] -->
  <p class="red">third</p>  <!-- [3] -->
  <p class="red">fourth</p> <!-- [3] -->
</div>

CSS Selector - first element with Class in a group of same class

To select first child of the ul element, you can use :first-child pseudo-class.

To select the first element in each group, you can use adjacent sibling selector.

.A + .B will select any element with class B that immediately follows an element with class A. Similarly .B + .A will select any element with class A that immediately follows an element with class B

.A { background: red; }.B { background: blue; }
.A:first-child,.B + .A,.A + .B {  background: yellow;}

<ul class="list">  <li class="item A">AAA</li><!-- I want to select this -->  <li class="item A">AAA</li>  <li class="item A">AAA</li>  <li class="item B">BBB</li><!-- I want to select this -->  <li class="item B">BBB</li>  <li class="item B">BBB</li>  <li class="item A">AAA</li><!-- I want to select this -->  <li class="item A">AAA</li>  <li class="item A">AAA</li></ul>

CSS selector to select first element of a given class

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>

This element does not have class A. No rules are applied.
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.
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.

CSS selector for the first element of class

You would use the :first-child pseudo class.

EXAMPLE HERE

.container .some_class:first-child button {
    background:black;
}

Alternatively, assuming that the markup can be different, you might need to use something like this to ensure that the first button is selected even if .some_class isn't the first element. (example)

.container :first-child button {
    background:black;
}

CSS3 selector :first-of-type with class name?

No, it's not possible using just one selector. The :first-of-type pseudo-class selects the first element of its type (div, p, etc). Using a class selector (or a type selector) with that pseudo-class means to select an element if it has the given class (or is of the given type) and is the first of its type among its siblings.

Unfortunately, CSS doesn't provide a :first-of-class selector that only chooses the first occurrence of a class. As a workaround, you can use something like this:

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }

Explanations and illustrations for the workaround are given here and here.

Select first child with given class (CSS)

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/

CSS selector for first element inside class

The selector should select the first .foo element, not the first a within foo.

.foo:first-child a{
   display:none;
}

See this post for more information on pseudo selectors as well as this working example.

How to select the first, second, or third element with a given class name?

You probably finally realized this between posting this question and today, but the very nature of selectors makes it impossible to navigate through hierarchically unrelated HTML elements.

Or, to put it simply, since you said in your comment that

there are no uniform parent containers

... it's just not possible with selectors alone, without modifying the markup in some way as shown by the other answers.

You have to use the jQuery .eq() solution.