Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Less

Select First Element Of The Same Class

Post a Comment
How to access first of many grouped element of the same class? Lets say i have something that looks like this:

Solution 1:

Use :first-child.

.group .element:first-child {
  color: red;
}
<div class="group">
    <div class="element">Test</div>
    <div class="element">Test</div>
    <div class="element">Test</div>
    <div class="element">Test</div>
</div>

<div class="group">
    <div class="element">Test</div>
    <div class="element">Test</div>
    <div class="element">Test</div>
    <div class="element">Test</div>
</div>

<div class="group">
    <div class="element">Test</div>
    <div class="element">Test</div>
    <div class="element">Test</div>
    <div class="element">Test</div>
</div>

Solution 2:

In case the .element will be the first element of its parent. You may use: 

.element:first-child {
  /* styles here */
}

This won't work in case there is any tag before <div class="element">...</div>in your HTML.

See docs.


Solution 3:

demo - http://jsfiddle.net/n2f8ko6y/

documentation of first-child

.group {
    .element:first-child {
        color: red;
    }
}

Solution 4:

How about using

.group .element:first-child{
    color: red;
}

Note: There is no such selector as :first in css which was mentioned in your question.

Working Fiddle


You may like these posts

Post a Comment for "Select First Element Of The Same Class"