[2023.03.03] 7. CSS 선택자(가상 클래스 / 가상 요소)

🔍CSS 선택자 중 가상 클래스와 가상 요소 선택자에 대해 정리!

 

 

가상 클래스 선택자 ( : )

• pseudo selectors
• 선택한 요소가 특별한 상태여야 만족한다.

 

:first-child

• 형제 요소 그룹 중 첫 번째 요소

:last-child

• 형제 요소 그룹 중 마지막 요소

:nth-child

• 형제 사이에서의 순서에 따라 요소 선택 가능

:nth-of-type

• 형제 그룹 안에서 위치를 기반으로 형제 요소 선택

:only-of-type

• 동일한 유형의 형제가 없는, 형제 요소 중 유일하게 사용된 태그 선택

:not

• 부정 선택자

:root

• html 전역 번수 선언할 때 사용

See the Pen Untitled by astinaus (@astinaus) on CodePen.

 

가상 요소 ( :: )

• 선택자에 추가하는 키워드
• 특정 요소의 일부분에만 스타일을 입힐 수 있다.

::after , ::before

• 선택한 요소에 자식을 생성
• 보통 content 속성과 짝을 지어 요소에 장식용 콘텐츠를 추가할 때 사용
• 빈 태그(img, br, input)에는 적용 불가

 

::placeholder

• 자리표시자
• input, textarea 요소에 정보를 제공한다.

 

💪참고 사이트

의사 클래스 - CSS: Cascading Style Sheets | MDN