複数の親にわたる特定の n 番目の子のスタイル設定

n 番目の子セレクターを使用してネストされた要素をスタイル設定する場合、セレクター単一の親コンテキスト内で動作します。これにより、複数の親にまたがる特定の子要素をターゲットにする場合に問題が発生する可能性があります。

問題:

次のマークアップを検討してください:

    
one
        
two
    
three
    
four
    

目的は、.foo 内の最初と 3 番目の li 要素のスタイルを設定することです。次の CSS を使用します:

.foo li:nth-child(1),
.foo li:nth-child(3)
{
    color: red;
}

nth-child が各 ul の最初と 3 番目の子を選択するため、このアプローチは機能しません。

解決策:

CSS の使用単独では、複数の親にわたる n 番目の子をターゲットにすることはできません。ただし、別の解決策もあります。

• JavaScript: jQuery のようなライブラリを使用すると、DOM 要素を簡単に操作して、$('.foo li:eq( など) の特定の要素を選択できます。 0), .foo li:eq(2)').
• Explicit Markup: クラスまたは ID を最初と 3 番目の li 要素に明示的に追加します (例:

    
one
        
two
    
three
    
four
    

次に、新しく追加したクラスを使用してスタイルを設定します:

.foo li.first,
.foo li.third
{
    color: red;
}