.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
종류 | 선택자 | 예시 | 설명 |
클래스선택자 | .class | .intro | intro를 클래스로 가진 모든 요소 |
Both | .class1.class2 | .name1.name2 | name1과 name2를 둘 다 가진 모든 요소 |
자손선택자 | .class1 .class2 | .name1 .name2 | name1의 자식 중 name2를 클래스로 가진 모든 요소 |
아이디선택자 | #id | #firstname | firstname을 아이디로 가진 모든 요소 |
전체선택자 | * | * | 모든 요소를 선택, 렌더링 성능 저하 가능 |
요소선택자 | element | p | 모든 p 요소 |
And | element,element | div, p | 모든 div 요소와 모든 p 요소 |
자손선택자 | element>element | div > p | 부모가 div 요소인 모든 p 요소 |
인접 형제 선택자 | element+element | div + p | div 요소 바로 뒤에 배치되는 첫 번째 p 요소 |
일반 형제 선택자 | element1~element2 | p ~ ul | p 요소가 앞에 오는 모든 ul 요소 |
속성선택자 | [attribute]
p[attribute] | [target]
a[target] | 대상 속성이 있는 모든 요소
요소 a인 target 속성이 있는 모든 a 요소 |
[attribute=value] | [target=_blank] | target="_blank"가 있는 모든 요소 | |
[attribute~=value] | [title~=flower] | "꽃"이라는 단어가 포함된 제목 속성을 가진 모든 요소 | |
[attribute|=value] | [lang|=en] | "en"으로 시작하는 lang 속성 값을 가진 모든 요소 | |
[attribute^=value] | a[href^="https"] | href 속성 값이 "https"로 시작하는 모든 a 요소 | |
[attribute$=value] | a[href$=".pdf"] | href 속성 값이 ".pdf"로 끝나는 모든 a 요소 | |
[attribute*=value] | a[href*="w3schools"] | href 속성 값에 하위 문자열 "w3schools"가 포함 된 모든 a 요소 | |
구조선택자 | 기본 선택자 구조 | :structure-selection
p :structure-selection
c:structure-selection
p c:structure-selection | ~인 모든 요소
부모 p의 ~인 모든 자식 요소
~인 부모의 c 요소
부모 p의 ~인 모든 자식 c 요소 |
:first-child | p c:first-child | 부모의 첫 번째 자식인 모든 c 요소 | |
:last-child | p c:last-child | 부모의 마지막 자식인 모든 c 요소 | |
:nth-child(n) | p c:nth-child(2) | 부모의 두 번째 자식인 모든 c 요소 | |
:nth-last-child(n) | p c:nth-last-child(2) | 마지막 자식부터 계산하여 부모의 두 번째 자식인 모든 c 요소 | |
:first-of-type | p c:first-of-type | 부모의 첫 번째 c 요소인 모든 c 요소 | |
:last-of-type | p c:last-of-type | 부모의 마지막 c 요소인 모든 c 요소 | |
:nth-of-type(n) | c:nth-of-type(N)
c:nth-of-type(Nn)
c:nth-of-type(Nn+i) | 부모의 N번째 c 요소인 모든 c 요소
부모의 N번 째마다 c 요소인 모든 c 요소
부모의 i부터 시작해서 N번 째마다 c 요소인 모든 c 요소 | |
:nth-last-of-type(n) | c:nth-last-of-type(2) | 마지막 자식부터 계산하여 부모의 두 번째 요소인 모든 c 요소 | |
:only-child | p :only-child
p c:only-child | 부모 p의 모든 유일한 자식 요소 선택
부모 p의 유일한 자식 요소 c인 경우 | |
:only-of-type | c:only-of-type | 부모의 유일한 p 요소인 모든 c 요소 | |
:empty | p:empty | 부모 p에 아무 자식 요소도 없는 p 요소 | |
:not | a:not(id, class, attr…)
a:not(구조선택자) | 해당 id, class 등등이 아닌 모든 a 요소
해당 구조선택자의 조건이 충족되지 않는 모든 a 요소 | |
반응선택자 | :active | a:active | a 요소가 활성화된 상태(클릭, 키보드 이벤트 등) |
:hover | a:hover | a 요소 위에 마우스 포인터가 올라가 있는 상태 | |
문자선택자 | ::after | p::after | 각 p 요소의 내용 뒤에 {무언가}를 삽입하라 |
::before | p::before | 각 p 요소의 내용 앞에 {무언가}를 삽입하라 | |
::first-letter | p::first-letter | 모든 p 요소의 첫 글자를 선택 | |
::first-line | p::first-line | 모든 p 요소의 첫 번째 줄을 선택 | |
::selection | ::selection | 사용자가 선택한 요소 부분을 선택 | |
상태선택자 | :focus | input:focus | 포커스가 있는 입력 요소를 선택 |
:enabled | input:enabled | 활성화된 모든 input 요소 | |
:disabled | input:disabled | 비활성화 된 모든 input 요소 | |
:checked | input:checked | 선택된 모든 input 요소. | |
링크선택자 | :link | a:link | 방문하지 않은 모든 링크 |
:visited | a:visited | 방문한 적 있는 모든 링크 |
CSS 선택자
