Korean English Japanese

CSS 다중 선택자 참조

CSS 선택자

CSS에서 선택자는 스타일을 설정할 요소를 선택하는 데 사용되는 패턴이다. 대부분의 선택자 요소에 대한 사용법과 설명을 번역 및 이해하기 쉽도록 구분해놓았으므로, 이를 통해 선택자 활용 능력을 발전시킬 수 있을 것이다.

다중 선택자 참조

선택자 예시 예제 설명
.class .intro class="intro"의 모든 요소를 선택합니다.
.class1.class2 .name1.name2 name1과 name2가 모두 설정된 모든 요소를 선택합니다.
.class1 .class2 .name1 .name2 name1 요소와 함께 name2의 하위 항목인 모든 요소를 선택합니다.  
#id #firstname ID="#firstname"인 요소를 선택합니다.
* * 모든 요소를 선택합니다.
element p 모든 p 요소를 선택합니다.
element.class p.intro class="intro"인 모든 p 요소를 선택합니다.
element,element div, p 모든 div 요소와 모든 p 요소를 선택합니다.
element element div p div 요소 내부의 모든 p 요소를 선택합니다.
element>element div > p 상위가 div 요소인 모든 p 요소를 선택합니다.
element+element div + p div 요소 바로 뒤에 배치되는 첫 번째 p 요소를 선택합니다.
element1~element2 p ~ ul p 요소 앞에 오는 모든 > 요소를 선택합니다.
[attribute] [target] 대상 특성이 있는 모든 요소를 선택합니다.
[attribute=value] [target=_blank] target="_blank"인 모든 요소를 선택합니다.
[attribute~=value] [title~=flower] "flower"이라는 단어가 포함된 제목 특성을 가진 모든 요소를 선택합니다.
[attribute|=value] [lang|=en] en으로 시작하는 언어 속성 값을 가진 모든 요소를 선택합니다.
[attribute^=value] a[href^="https"] https로 시작하는 href 속성 값을 가진 모든 a 요소를 선택합니다.
[attribute$=value] a[href$=".pdf"] href 속성 값이 ".pdf"로 끝나는 모든 a 요소를 선택합니다.
[attribute*=value] a[href*="w3schools"] href 속성 값이 "w3schools" 하위 문자열을 포함하는 모든 a 요소를 선택합니다.
:active a:active 활성 링크를 선택합니다.
::after p::after 각 p 요소의 내용 뒤에 무언가를 삽입합니다.
::before p::before 각 p 요소의 내용 앞에 무언가를 삽입합니다.
:checked input:checked 선택된 모든 input 요소를 선택합니다.
:default input:default 기본 input 요소를 선택합니다.
:disabled input:disabled 비활성화된 모든 input 요소를 선택합니다.
:empty p:empty 하위 항목(텍스트 노드 포함)이 없는 모든 p 요소를 선택합니다.
:enabled input:enabled 활성화된 모든 input 요소를 선택합니다.
:first-child p:first-child 상위의 첫 번째 하위 항목인 모든 p 요소를 선택합니다.
::first-letter p::first-letter 모든 p 요소의 첫 글자를 선택합니다.
::first-line p::first-line 모든 p 요소의 첫 번째 라인을 선택합니다.
:first-of-type p:first-of-type 상위의 첫 번째 < 요소인 모든 p 요소를 선택합니다.
:focus input:focus 포커스가 있는 입력 요소를 선택합니다.
:fullscreen :fullscreen 전체 화면 모드에 있는 요소를 선택합니다.
:hover a:hover 마우스 위에 있는 링크를 선택합니다.
:in-range input:in-range 지정된 범위 내의 값을 가진 입력 요소를 선택합니다.
:indeterminate input:indeterminate 중간 상태에 있는 입력 요소를 선택합니다.
:invalid input:invalid 잘못된 값을 가진 모든 입력 요소를 선택합니다.
:lang(language) p:lang(it) "it"(이탈리아어)와 동일한 언어 특성을 가진 모든 with 요소를 선택합니다.
:last-child p:last-child 상위 항목의 마지막 하위 항목인 모든 p 요소를 선택합니다.
:last-of-type p:last-of-type 상위의 마지막 < 요소인 모든 p 요소를 선택합니다.
:link a:link 방문하지 않은 모든 링크를 선택합니다.
::marker ::marker 목록 항목의 마커를 선택합니다.
:not(selector) :not(p) p 요소가 아닌 모든 요소를 선택합니다.
:nth-child(n) p:nth-child(2) 상위 항목의 두 번째 하위 항목인 모든 p 요소를 선택합니다.
:nth-last-child(n) p:nth-last-child(2) 마지막 하위 항목부터 계산하여 상위 항목의 두 번째 하위 항목인 모든 p 요소를 선택합니다.
:nth-last-of-type(n) p:nth-last-of-type(2) 마지막 하위 항목부터 계산하여 상위 항목의 두 번째 p 요소인 모든 p 요소를 선택합니다.
:nth-of-type(n) p:nth-of-type(2) 상위의 두 번째 p 요소인 모든 p 요소를 선택합니다.
:only-of-type p:only-of-type 상위 항목의 유일한 < 요소인 모든 p 요소를 선택합니다.
:only-child p:only-child 상위 항목의 유일한 하위 항목인 모든 p 요소를 선택합니다.
:optional input:optional 필수 속성이 없는 입력 요소를 선택합니다.
:out-of-range input:out-of-range 지정된 범위를 벗어나는 값을 가진 입력 요소를 선택합니다.
::placeholder input::placeholder 자리 표시자 속성이 지정된 입력 요소를 선택합니다.
:read-only input:read-only 지정된 "읽기 전용" 특성을 가진 입력 요소를 선택합니다.
:read-write input:read-write "읽기 전용" 특성이 지정되지 않은 입력 요소를 선택합니다.
:required input:required 필수 속성이 지정된 입력 요소를 선택합니다.
:root :root 문서의 루트 요소를 선택합니다.
::selection ::selection 사용자가 선택한 요소의 부분을 선택합니다.
:target #news:target 현재 활성 #뉴스 요소를 선택합니다(해당 앵커 이름이 포함된 URL 클릭).
:valid input:valid 유효한 값을 가진 모든 입력 요소를 선택합니다.
:visited a:visited 방문한 모든 링크를 선택합니다.