선택자

:nth-child(7n) > 7, 14, 21, 28 ... 번째 (7의 배수)

:nth-child(n+20) > 20번째부터 그 이후에 전부

:nth-child(-n + 5) > 1번째부터 4번째까지

:nth-child(n+16):nth-child(-n+19) > 16번째부터 19번째까지

:nth-last-child(3) > 마지막에서부터 3번째

:nth-child(2n+1) / :nth-child(odd) > 홀수번째

:nth-child(2n) / :nth-child(even) > 짝수번째

:not(:frist-child) > 첫번째 자식만 빼고

:not(.class) > .class명 붙은 애들만 빼고

 

button[style*="display: none"] + p > 버튼이 display: none 일 때 p

button:not([style*="display: none"] + p > 버튼이 display: none이 아닐 때 p

li[style*="display: none"] ~ li:nth-child(odd) > display: none인 li 다음 홀수번째

* display:none 되도 기존 홀수짝수 영향 없음

 

div p:only-child{color:red}

<div>

  <p>이것만 빨간색 들어감</p>

</div>

<div>

  <p>..</p>

  <p>..</p>

</div>

 

li:nth-child(4n+1), li:nth-child(4n+2){color:red;}

<li>여기</li>

<li>여기</li>

<li>..</li>

<li>..<li>

<li>여기</li>

<li>여기</li>

<li>..</li>

<li>..<li>