개념정리 SELECTOR(선택자)

id 선택자 : 특정 요소를 선택할 때 사용

 

class 선택자 : 특정 집단의 여러 요소를 한 번에 선택

 

결합 선택자

• 일치 선택자    #EF
• 자식 선택자 (자식만)   #E>F
• 자손 선택자 (자식과 손자까지 전부)   #E F

동위 선택자

• 인접 형제 선택자  #E+F
• 일반 형제 선택자  #E~F

그룹 선택자

 선택 방법 E, F

 

의사 선택자

의사 요소

선택자	설명
::first-letter	콘텐츠의 첫글자를 선택
::first-line	콘텐츠의 첫줄 선택
::after	콘텐츠의 뒤에 위치하는 공간을 선택 일반적으로 content 프로퍼티와 함께 사용
::before	콘텐츠의 앞에 위치하는 공간을 선택
::selection	드래그한 콘텐츠를 선택

 

after, before 는 앞이나 뒤에 content를 추가하고 스타일을 적용할 수 있음.

 

의사 클래스

동적 의사 클래스

선택자	설명
:link	셀렉터가 방문하지 않은 링크일 때
:visited	셀렉터가 방문한 링크일 때
:hover	셀렉터에 마우스가 올려져 있을 때
:active	셀렉터가 클릭된 상태일 때
:focus	셀렉터에 포커스가 들어와 있을 때

 

상태 의사 클래스

선택자	설명
:checked	셀렉터가 체크 상태일 때
:enabled	셀렉터가 사용 가능한 상태일 때
:disabled	셀렉터가 사용 불가능한 상태일 때

 

form 정합성 체크 선택자

부정 선택자

 

구조 의사 클래스

FIRST CHILD

LAST CHILD

NTH CHILD

FIRST OF TYPE / LAST OF TYPE

NTH OF TYPE

 

속성 선택자

속성 선택 문법 기호

 

ATTR

ATTR=VALUE

ATTR^=VALUE

ATTR$=VALUE

ATTR*=VALUE

ATTR!=VALUE