`nth-from-last-child` 색상 설정

Question

nth-child을 선택할 수 있지만 마지막 요소부터 세는 CSS 선택기가 있습니까?

마지막 두 번째 요소의 색상을 빨간색으로 설정하려고하지만 <p> 요소의 개수는 가변적입니다.

예 :

<div> 
    <p>Hi</p> 
    <p>Hi</p> 
    <p>Hi</p> 
    <p>Hi</p> 
</div> 

Answer 1

p:nth-last-child(2)보다는 p:nth-from-last-child(2) 될 것이라고.

Answer 2

nth-last-child(2)이라고합니다. nth-child과 같은 것이지만, 상단 대신 항목 목록의 맨 아래부터 시작됩니다. MDN 가입일

:

: n 번째 마지막 하위 CSS 의사 클래스에 대한 소정의 양수 또는 제로 값 문서 트리에서 후 + b-1을 형제를 갖는 소자, 일치 n 및 부모 요소가

Fiddle

Answer 3

시도 :

div > p:nth-last-child(2) {color: red} 

마지막으로 p에서부터 뒤로 계산되기 때문에 div > p:nth-last-child(3)은 마지막 세 번째 p 태그의 색상을 설정합니다.