CSS first child of specific class

Question

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!

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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