CSS에서 마지막에서 두 번째 요소를 선택하는 방법은 무엇입니까?

마지막 두 번째 요소에 대한 CSS 선택기

CSS를 사용할 때 상위 요소 내의 위치에 따라 요소를 선택하는 것이 일반적입니다. :last-child는 마지막 요소를 선택하는 데 널리 사용되는 선택이지만, 마지막 요소 바로 앞의 요소를 선택하는 방법이 있나요?

이를 달성하려면 :nth-last-child 선택기를 활용할 수 있습니다. CSS3에서. 작동 방식은 다음과 같습니다.

<code class="css">:nth-last-child(2) {
  /* Styling for the second last child */
}</code>

이 예에서 :nth-last-child(2) 선택기는 상위 요소 끝에서 2번째인 요소와 일치합니다. 지정된 HTML에서 다음 요소를 선택합니다.

<code class="html"><div>SELECT THIS</div></code>

다음은 적절한 선택기가 적용된 HTML의 업데이트된 버전입니다.

<code class="html"><div id="container">
  <div>a</div>
  <div>b</div>
  <div class="second-last">SELECT THIS</div>
  <div>c</div>
</div></code>

<code class="css">#container .second-last {
  /* Styling for the second last child of #container */
  background-color: lightblue;
}</code>

지원되는 브라우저 :n번째-마지막 하위 포함:

• Chrome 2
• Firefox 3.5
• Opera 9.5, 10
• Safari 3.1, 4
• Internet Explorer 9

위 내용은 CSS에서 마지막에서 두 번째 요소를 선택하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!