Select First Element Of The Same Class

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

<divclass="group"><divclass="element">Test</div><divclass="element">Test</div><divclass="element">Test</div><divclass="element">Test</div></div><divclass="group"><divclass="element">Test</div><divclass="element">Test</div><divclass="element">Test</div><divclass="element">Test</div></div><divclass="group"><divclass="element">Test</div><divclass="element">Test</div><divclass="element">Test</div><divclass="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

Share