Style first element with class

Question

Is there a way to style only the first element with a specific class? The :first-child psuedo selector seems to only work on tags.

EDIT: Not all classes have the same parent element so :first-child isn't an option.

Answer 1

You may try like this:

<div>
    <p class="blue">1st</p>
    <div class="blue">2nd</div>
</div>
<div>
    <div class="blue">3rd</p>
    <div class="blue">4th</div>
</div>

So this will make only the first element as blue

Also check :first-child pseudo-class

The :first-child pseudo-class matches an element that is the first child element of some other element.

Answer 2

.class-name:nth-of-type(1)

This should style what you want

JsFiddle example

Answer 3

This should work .classNamep:first-of-type

Answer 4

You need to double check your class name. A typo could happen.

See this fiddle. It shows you that :first-child works even with class selectors. :)

Code:

<span class="spana">first</span>
<span class="spana">second</span>

.spana:first-child {
    background-color: #ddd;
}

Answer 5

Using the nth-child() pseudo class selector is a good approach, this is supported in all major browsers, including IE9+.

Here is the example HTML:

<div class="blue">Will be blue</div>    
<div class="blue">Will not be blue</div>
<div class="blue">Will not be blue</div>
<div class="blue">Will not be blue</div>

And the CSS:

.blue:nth-child(1) {
    color: blue;
}

This will select the first div of class name blue. Bare in mind that the first iteration is selected by passing 1 into the pseudo class, not 0 like arrays for example.

There are also other key features of the nth-child() pseudo class; as well as passing in numbers like I have shown previously, the pseudo class also supports key words such as even or odd like so.

//Applies styling to every even instance of the class .blue 
.blue:nth-child(even) {
    color: blue;
}

//Applies styling to every odd instance of the class .blue 
.blue:nth-child(odd) {
    color: blue;
}

This can also be taken further; a formula can be expressed as to exactly which elements the styling is to be applied to. The formula is expressed an+b, where a is the frequency of the elements to select, and b is the offset. So the formula 3n+4 will apply styling to the fourth element, and every third element beyond that. (4, 7, 10, 13, 16, etc...). Below is an example of how this can be applied.

//Style every 6th instance of the class .blue, starting with the second element. (2, 8, 14, 20, 26).
.blue:nth-child(6n+2) {
    color: blue;
}

If no offset is required then simply pass in the same formula as before, dropping the offset at the end; passing in 4n is an example of this.

I hope this helps, I feel that this pseudo class is very powerful, and equally under rated by a lot of people.

Answer 6

There is no first-of-class selector.

See BoltClock's answer (CSS3 selector :first-of-type with class name?)

There is a work around but it didn't work for me