複数の親にわたるネストされた n 番目の子要素のスタイル設定

さまざまな親構造内で特定のネストされた要素のスタイルを設定するソリューションを探している場合は、次のマークアップを検討してください。 :

• one
• two

• three

• four

目標は、最初の子であるかどうかに関係なく、「1」と「3」にスタイルを適用することです。各

.

:nth-child()

の使用の試行の制限:nth-child() は、同じ親を共有する要素にのみ適用されるため、不十分です。このシナリオでは、CSS セレクター .foo li:nth-child(1)、.foo li:nth-child(3) は、各

.

Alternative の最初の子のみをターゲットにします。解決策

JavaScript:

jQuery などのライブラリを使用すると、 JavaScript の強力なフィルタリング機能を使用して要素を処理します。たとえば、次のスクリプトは、.foo コンテナ内の最初と 3 番目の

• 要素をターゲットとします:

  $('.foo li:eq(0), .foo li:eq(2)')

  明示的な要素のマーキング:

  必要な要素をクラスまたは ID で明示的にマークできます。 CSS 経由で選択を有効にします。たとえば、最初と 3 番目の

• 要素にクラスを追加します:

• one
• two

その後、CSS を使用してマークされた要素をターゲットにできます:

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