CSS primo figlio di classe specifica

Question

Ho il seguente pezzo di codice HTML:

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

vorrei aggiungere un certo stile sul primaspan con class="route-line". È possibile con i CSS? È qualcosa come nth-of-type; se fosse esistito, sarebbe stato chiamato nth-of-type-with-class.

Grazie!

Answer 1

prima campata con classe .route-line seguita per qualsiasi altro elemento che non hanno classe .route-line

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

Answer 2

Perché non si applica un'altra classe all'elemento che si desidera applicare allo stile.

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

E il css sarebbe simile a questa

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

Nota entrambi gli stili di classi (percorso linea & custom-percorso-line) si applicano a tale elemento. Take a look here

Answer 3

In questi casi è possibile utilizzare il selettore di pari livello. In questo modo:

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

Sarà lo stile solo il span che segue l'elemento con una classe ui-icon.

Answer 4

Cosa stavate cercando è span.route-line:first-of-type, ma è mal supportato .