Style first element with class - html

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