CSS를 사용하여 두 번째 마지막 요소 선택

CSS를 사용하여 두 번째 마지막 요소 선택

저는 이미 알고 있습니다: 마지막 아이.하지만 div를 선택할 수 있는 방법이 있습니까?

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div> <!-- THIS -->
 <div>c</div>
</div>

참고: jQuery를 사용하지 않고 CSS만 사용

CSS3에는 다음이 있습니다.

:nth-last-child(2)

참조: https://developer.mozilla.org/en-US/docs/Web/CSS/ : n번째 마지막 자녀

n번째 마지막 자식 브라우저 지원:

• 크롬 2
• 파이어폭스 3.5
• 오페라 9.5, 10
• 사파리 3.1, 4
• 인터넷 익스플로러 9

참고: OP가 나중에 댓글로 두 번째부터 마지막까지가 아닌 마지막 두 가지 요소를 선택해야 한다고 했기 때문에 이 답변을 올렸습니다.

---

그:nth-child사실 CSS3 선택기는 당신이 상상했던 것보다 더 능력이 있습니다!

예를 들어, 마지막 2개의 요소가 선택됩니다.#container:

#container :nth-last-child(-n+2) {}

하지만 이것은 아름다운 우정의 시작일 뿐입니다.

• :nth-child브라우저 지원

#container :nth-last-child(-n+2) {
  background-color: cyan;
}

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div>
 <div>SELECT THIS</div>
</div>

이렇게 하면 각 LI 뒤에 쉼표, 두 번째 LI 뒤에 "또는"이 추가되고 n번째 마지막 LI():: 뒤에 순수 CSS를 사용하여 마지막 LI에 마침표가 추가됩니다.

두 번째에서 마지막 LI에만 영향을 미치려면 마지막 CSS 항목을 삭제하고 두 번째 CSS 항목의 (n+3) 내용을 빈('')으로 설정합니다.

`<style>
    /* Append endings to LIs.
       Append "," to all but the last 2 LIs.
       Append ", or" to the 2nd to the last LI. 
       Append "." to the last LI. */
    article li:nth-last-child(n + 2)::after {
        /* All but the last row. */
        content: ', or';
    }
    article li:nth-last-child(n + 3)::after {
        /* Overwrite all but the last two rows. */
        content: ',';
     }
     article li:nth-last-child(1)::after {
        content: '.';
     }
</style>
<ul>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
    <li>Line 4</li>
</ul>`

수확량

• 1호선,
• 2호선,
• 3호선, 또는
• 4호선.

언급URL : https://stackoverflow.com/questions/5418744/select-second-last-element-with-css