css - 特定のクラスのCSSの最初の子

Question

次のHTMLコードがあります。

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

最初 spanに。でスタイルを追加したいと思いclass="route-line"ます。CSSで可能ですか？それは次のようなものnth-of-typeです; もしそれが存在していたら、それはと呼ばれていたでしょうnth-of-type-with-class。

ありがとうございました！

score 9 · Accepted Answer

このような場合、兄弟セレクターを使用できます。そのようです：

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

spanクラスを持つ要素に続くのみをスタイル設定しますui-icon。

score 3 · Accepted Answer

クラス.route-lineを持たない他の要素については、クラス.route -lineの最初のスパンが続きます

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

score 2 · Accepted Answer

スタイリングしたい要素に別のクラスを適用してみませんか。

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

そして、cssは次のようになります

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

クラスの両方のスタイル（route-lineとcustom-route-line）がその要素に適用されることに注意してください。こちらをご覧ください

score 1 · Accepted Answer

あなたが探していたのはですがspan.route-line:first-of-type、サポートが不十分です。

4 に答える 4