CODEWITHSUNDEEP
css
linkyndy
linkyndy

Reputation: 17900

CSS first child of specific class

I have the following piece of HTML code:

<span class="ui-icon ui-icon-triangle-1-s"></span>
<span class="route-line">4</span>
<span class="route-line">33</span>

I would like to add some style on the first span with class="route-line". Is it possible with CSS? It is something like nth-of-type; if it had existed, it would have been called nth-of-type-with-class.

Thank you!

Upvotes: 7

Views: 3347

Answers (4)

Leo
Leo

Reputation: 1809

First span with class .route-line followed for any other element that don't have class .route-line

*:not(.route-line) + span.route-line
{
    background-color:yellow;
}

Upvotes: 3

pozs
pozs

Reputation: 36244

What you were looking for is span.route-line:first-of-type, but it's poorly supported.

Upvotes: 1

skip405
skip405

Reputation: 6279

In such cases you can use the sibling selector. Like so:

.ui-icon + .route-line{
    color: red;
}

It will style only the span which follows the element with a class ui-icon.

Upvotes: 9

menislici
menislici

Reputation: 1167

Why don't you apply another class to the element you want to style.

<span class="ui-icon ui-icon-triangle-1-s"></span>
<span class="route-line custom-route-line">4</span>
<span class="route-line">33</span>

And the css would look like this

.custom-route-line{/*your styling goes here*/}

Note both styles of classes (route-line & custom-route-line) will apply to that element. Take a look here

Upvotes: 2

Related Questions