CSS primer hijo de la clase específica

Question

Tengo el siguiente fragmento de código HTML:

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

me gustaría añadir algo de estilo en la primera span con class="route-line". ¿Es posible con CSS? Es algo así como nth-of-type; si hubiera existido, se habría llamado nth-of-type-with-class.

¡Gracias!

Answer 1

primer tramo con la clase .route línea seguido por cualquier otro elemento que no tienen clase .route línea

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

Answer 2

¿Por qué no aplica otra clase al elemento que desea diseñar?

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

Y el css se vería así

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

Nota ambos estilos de clases (ruta de línea & medida ruta en línea) se aplicarán a ese elemento. Take a look here

Answer 3

En tales casos, puede usar el selector de hermanos. De este modo:

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

Será sólo el estilo de span que sigue el elemento con una clase ui-icon.

Answer 4

Lo que estaba buscando es span.route-line:first-of-type, pero es escaso apoyo .