가상 클래스 선택자

Pseudo-class (가상 클래스)

콜론(:)을 사용해 선택할 수 있음

<div class="div1">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
  <p>Paragraph 4</p>
  <p>Paragraph 5</p>
  <p>Paragraph 6</p>
</div>

:nth-child

.div1 p:nth-child(3) {font-weight: bold;}
.div1의 자식인 <p> 태그 중 3번째

Paragraph 3

:first-child

.div1 p:first-child {font-weight: bold;}
.div1의 자식인 <p> 태그 중 첫 번째

Paragraph 1

:last-child

.div1 p:last-child {font-weight: bold;}
.div1의 자식인 <p> 태그 중 마지막

Paragraph 6

:not(:*-child)

.div1 p:not(:last-child) {font-weight: bold;}
.div1의 자식 중 마지막 자식이 아닌 <p> 태그

Paragraph 1
Paragraph 2
Paragraph 3
Paragraph 4
Paragraph 5

.div1 p:not(:first-child) {font-weight: bold;}
.div1의 자식 중 첫 번째 자식이 아닌 <p> 태그

Paragraph 2
Paragraph 3
Paragraph 4
Paragraph 5
Paragraph 6