CSS pierwszym dzieckiem określonej klasy

Question

Mam następujący fragment kodu HTML:

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

chciałbym dodać trochę stylu na pierwszyspan z class="route-line". Czy to możliwe z CSS? Jest to coś w rodzaju nth-of-type; gdyby istniał, zostałby nazwany nth-of-type-with-class.

Dziękujemy!

Answer 1

pierwsze przęsło z klasy .route linii następnie dla każdego innego elementu, które nie mają klasy .route linię

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

Answer 2

Dlaczego nie zastosujesz innej klasy do elementu, który chcesz stylować.

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

A css wyglądałby następująco

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

Uwaga oba style klas (trasa linii & zwyczaj-route-Line) będą miały zastosowanie do tego elementu. Take a look here

Answer 3

W takich przypadkach można użyć selektora rodzeństwa. Tak:

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

Będzie projektować tylko span które towarzyszą mu element z klasy ui-icon.

Answer 4

czego szukasz span.route-line:first-of-type, ale jest słabo obsługiwany .