CSS 셀렉터 목록 (css selector) on redgoose note

CSS 셀렉터 목록 (css selector)

Nest: Development Category: html/css 2019-07-01

Selector Example Example description CSS
.class .intro class로 지정된 요소 선택 1
#id #firstname id로 지정된 요소 선택 1
* * 모든 요소 선택 2
element E E 요소를 선택 1
element,element div,p E와 F 요소 선택 1
element element E F E 요소속의 모든 F 선택 1
element>element E>F E 요소의 자식인 F 요소 선택 2
element+element E+F E 요소를 뒤의 F 요소 선택 2
[attribute] E[foo] ‘foo’ 속성이 포함된 E를 선택 2
[attribute=value] E[foo="bar"] ‘foo’ 속성의 값이 ’bar’와 일치하는 E를 선택 2
[attribute~=value] E[foo~="bar"] ‘foo’ 속성의 값에 ’bar’가 포함되는 E를 선택 2
[attribute|=value] E[foo|="en"] ‘foo’ 속성의 값이 ’en’ 또는 ’en-’ 으로 시작되는 E를 선택 2
:link E:link 방문하지 않은 E를 선택 1
:visited E:visited 방문한 E를 선택 1
:active E:active 마우스 클릭 또는 키보드(enter)가 눌린 동안 E를 선택 1
:hover E:hover 마우스가 올라가 있는 동안 E를 선택 1
:focus E:focus focus가 머물러 있는 동안 E를 선택 2
:first-letter E:first-letter E 요소의 첫 번째 문자 선택 1
:first-line E:first-line E 요소의 첫 번째 라인 선택 1
:first-child E:first-child 첫 번째 자식 요소가 E라면 선택 2
:before E:before E 요소 전에 생성된 요소 선택 2
:after E:after E 요소 후에 생성된 요소 선택 2
:lang(language) E:lang(fr) HTML lang 속성의 값이 ’fr’로 지정된 E를 선택 2
element1~element2 E~F E 요소가 앞에 존재하면 F를 선택 3
[attribute^=value] E[foo^="bar"] ‘foo’ 속성의 값이 ’bar’로 정확하게 시작하는 요소 선택 3
[attribute$=value] E[foo$="bar"] ‘foo’ 속성의 값이 ’bar’로 정확하게 끝나는 요소 선택 3
[attribute*=value] E[foo*="bar"] ‘foo’ 속성의 값에 ’bar’를 포함하는 요소 선택 3
:first-of-type E:first-of-type E 요소 중 첫번째 E 선택 3
:last-of-type E:last-of-type E 요소 중 마지막 E 선택 3
:only-of-type E:only-of-type E 요소가 같은 타입이면 선택 3
:only-child E:only-child E 요소가 유일한 자식이면 선택 3
:nth-child(n) E:nth-child(n) 그 부모의 n번째 자식이 앞으로부터 지정된 순서와 일치하는 E 라면 선택 3
:nth-last-child(n) E:nth-last-child(n) n번째 자식이 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택 3
:nth-of-type(n) E:nth-of-type(n) E 요소 중 앞으로부터 순서가 일치하는 n번째 E 요소 선택 3
:nth-last-of-type(n) E:nth-last-of-type(n) E 요소 중 끝으로부터 순서가 일치하는 n번째 E 요소 선택 3
:last-child E:last-child E 요소 중 마지막 자식이라면 E 선택 3
:root E:root 문서의 최상위 루트 요소 선택 3
:empty E:empty 텍스트 및 공백을 포함하여 빈 자식을 가진 E를 선택 3
:target E:target E의 URI의 대상이 되면 선택 3
:enabled E:enabled 활성화된 폼 컨트롤 E요소 선택 3
:disabled E:disabled 비활성화된 폼 컨트롤 E요소 선택 3
:checked E:checked 선택된 폼 컨트롤(라디오버튼,체크박스)을 선택 3
:not(selector) E:not(s) s가 아닌 E 요소 선택 3
::selection ::selection 드래그로 선택한 영역 선택 3
:nth-child(2n+1) 1,3,5,7 홀수번째의 태그를 선택한다. 3