CSS first child of a certain class

Question

I have the following HTML code snippet:

<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 to the first span with class="route-line" . Is this possible with CSS? This is something like nth-of-type ; if it existed, it could be called nth-of-type-with-class .

Thanks!

Answer 1

The first span with the .route-line class for any other element that does not have the .route-line class

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

Answer 2

In such cases, you can use the selector. For example:

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

It will stylize only the span that follows the element with the ui-icon class.

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 css will look like this

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

Note that both class styles (route line and route line) apply to this element. Look at here

Answer 4

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