Css Selector For First Element With 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>

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.

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;
}

CSS Selector for first nested element with class

first-of-type it's suposed to be used with tag names, not classes.

Take a look at this thread.

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 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.

CSS - selector for first element anywhere under a parent

#wrapper label:first-of-type won't work as every label is the first of it's type within it's immediate parent. That's the key here, these sorts of selectors are always relative to the immediate parent.

So, you could do something like this:

#wrapper div:first-child > label

which would select any label elements which are an immediate child of a div which is the first child within it's parent

nth-of-type css selector to target the first element of a class

The n-th-of-type selector refers to the tag type on the same level, not the class, in this case the div tags which are siblings inside .wrapper. Therefore you need this CSS, since they are the third and fourth div in there:

.wrapper .row:nth-of-type(n+3) {
  background-color: red;
}
.wrapper .row:nth-of-type(n+4) {
  background-color: blue;
}

https://jsfiddle.net/cb3qd8t6/

Css Selector For First Element With Class