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>

목표는 목록 항목 "1"과 "3"의 스타일을 빨간색으로 지정하는 것입니다. 그러나 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!