[CSS] CSS 선택자 정리

선택자(Selector)는 마크업 언어에서 작성된 요소들 중 원하는 범위를 선택하는데 사용됩니다.

선택자를 이용하면 원하는 요소들에 CSS 스타일을 적용할 수 있습니다.

 

선택자를 통해 특정 속성(property)을 원하는 값(value)로 설정하기 위해서는 다음과 같은 문법을 따릅니다.

Selector { property : value }

선택자	범위
*	모두
#c	id 속성값이 c
.c	class 속성값이 c
E	태그 이름이 E
E F	E의 하위 F
E > F	E의 자식 F
E + F	E 앞에 있는 F
E : first-child	부모의 첫 자식인 E
E : link	E가 방문 안한 자원
E : visited	E가 방문 한 자원
E : active	E가 활성화 됐을 때
E : hover	E 위에 마우스가 지나갈 때
E : focus	E가 선택되었을 때
E : focus-within	E의 자식이 선택되었울 때
E : focus-visible	E가 선택되었을 때. 단, 버튼은 tab 키로 접근했을 때만 한정
E : lang(c)	설정 언어가 c인 E
E : not(selector)	selector에 해당하지 않는 E
E :: after	E의 바로 뒤에 만든 가상 요소
E :: before	E의 바로 앞에 만든 가상 요소
E :: -webkit-scrollbar	E의 스크롤바
E :: -webkit-scrollbar-thumb	E의 스크롤바 손잡이
E[foo]	속성이 foo인 E
E[foo=“warning”]	Foo 값이 warning인 E
E[foo~=“waring”]	속성값이 공간일 때, 그 중 하나가 warning인 E
E[lang |= “en”]	속성값이 ‘-‘로 분리된 목록일 때, 왼쪽에서 en~으로 시작하는 E
E#myid	Id가 myid인 E
DIV.warning	DIV[class ~= “warning”]