Pseudo selector(의사 클래스)

pseudo selector(의사 클래스=가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있다.

ex)

• :hover
• :focus
• :active
• :root
• :first-child
• :last-child
• :nth-child()
• :nth-of-type()

ex)
div:first-child{
  color: black;
  font-size: 18px;
}

:nth-child() vs :nth-of-type()

• nth-child(n)는 자식 요소 중 n번째 자식 요소를 선택한다.
• nth-of-type(n)은 동일한 유형(tag name)의 형제간의 위치를 기준으로 요소를 선택한다.
• 코코아 클론 챌린지 - 8일차 : + 정답 해설 참고

---

Pseudo element(의사 요소)

Pseudo element(의사 요소=가상 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있다.

ex)

• ::after ( :after )
• ::marker
• ::placeholder

ex)
input::placeholder{
  color: white;
  font-size: 30px;
}