さまざまな子構造を持つ特定の要素に CSS スタイルを適用するにはどうすればよいですか?

:nth-child を使用した複数の親全体のスタイル設定

問題:

CSS セレクターが複数の親にまたがる特定の要素に影響を与えることを確認するさまざまな子要素構造を持つ親は困難になる可能性があります。次の例を考えてみましょう:

<code class="html"><div class="foo">
    <ul>
        <li>one</li>
        <li>two</li>
    </ul>
    <ul>
        <li>three</li>
    </ul>
    <ul>
        <li>four</li>
    </ul>
</div></code>

目的は、「one」と「three」のリスト項目に特定のスタイルを適用することです。ただし、:nth-child(1) および :nth-child(3) セレクターを使用すると、各 ul 要素内の最初と 3 番目のリスト項目のスタイルが設定されます。

解決策:

残念ながら, CSS セレクターだけでは、このような親子構造の変化に対処できません。 :nth-child() セレクターと兄弟コンビネータは、同じ親内の要素の選択に制限されています。

代替アプローチ:

• JavaScript: などのライブラリjQuery を使用すると、DOM 内のインデックスや位置に基づいて特定の要素をターゲットにすることができます。
• 明示的マーキング: クラスまたは ID を目的の要素 (この場合は 1 と 3) に追加すると、 CSS セレクターを使用して正確なターゲティングを行うため。

たとえば、クラス「selected」を .foo 要素内の最初と 3 番目のリスト項目に追加します。

<code class="html"><div class="foo">
    <ul>
        <li class="selected">one</li>
        <li>two</li>
    </ul>
    <ul>
        <li class="selected">three</li>
    </ul>
    <ul>
        <li>four</li>
    </ul>
</div></code>

CSS:

<code class="css">.foo li.selected {
    color: red;
}</code>

以上がさまざまな子構造を持つ特定の要素に CSS スタイルを適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。