CSS で複数の親にまたがる n 番目の子をターゲットにする方法は?

CSS: 複数の親にわたる n 番目の子をターゲットにする

問題

次の HTML 構造を考えてみましょう。

<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」を赤色でスタイル設定することです。ただし、CSS セレクターを使用すると、

<code class="css">.foo li:nth-child(1),
.foo li:nth-child(3)</code>

代わりに各 UL の最初の子がスタイルされます。

解決策

CSS のみのアプローチ:

残念ながら、CSS だけを使用して複数の親から n 番目の子を選択することはできません。 :nth-child() も兄弟コンビネータもそのような選択を許可しません。

JavaScript または DOM 操作:

そのようなターゲットを達成するには、JavaScript または DOM を使用できます。操作技術。たとえば、jQuery を使用する:

<code class="javascript">$('.foo li:eq(0), .foo li:eq(2)').css('color', 'red');</code>

クラスまたは ID マーキング:

または、ターゲット リスト項目をクラスまたは ID で明示的にマークできます。例:

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

次に、マークされたクラスまたは ID を使用してスタイルを設定します:

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

以上がCSS で複数の親にまたがる n 番目の子をターゲットにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。