[CSS] CSS 선택자

CSS 선택자

1. CSS1, 2 선택자

*

모든 요소를 선택

E

태그명이 E인 특정 태그를 선택

E F

E의 자손 요소인 F를 선택

E > F

E의 자식 요소인 F를 선택

E:first-child

첫 번째 등장하는 요소가 E라면 선택
(E 아닌 요소의 순서가 계산에 포함)

IE7에서는 부모와 자식 간에 주석이 있으면 동작 X

E:link

아직 방문하지 않은 링크 E를 선택

E:visited

이미 방문한 링크 E를 선택

E:hover

포인팅 디바이스가 요소에 맴돌고 있는 동안 E 선택
(인터랙티브 미디어를 지원하지 않는 환경에서는 이 선택자를 사용할 수 없을 수 있다.)

E:active

유저에 의해 요소가 활성화 되있는 동안 E 선택

E:focus

유저에 의해 요소에 포커스가 머물러 있는 동안 E 선택

키보드나 마우스 이벤트를 통해 가능

E:lang(ko)

HTML lang속성의 값이 ‘ko’로 지정된 E 선택

E + F

E 요소를 뒤따르는 F요소를 선택
(E와 F 사이에 다른 요소가 조재하면 선택X)

E[attr]

‘attr’속성이 포함된 요소 E 선택

E[attr=’val’]

‘attr’속성의 값이 정확하게 ‘val’과 일치하는 요소 E 선택

E[attr~=’val’]

‘attr’속성의 값에 ‘val’이 포함되는 요소 E 선택
(공백으로 분리된 값이 일치해야 함)

E[attr=’val’]

‘attr’속성의 값이 정확하게 ‘val’이거나 ‘val-‘으로 시작되는 요소 E 선택

.myClass

클래스 속성값이 myClass로 지정된 요소를 선택

#myId

아이디 속성값이 myId로 지정된 요소를 선택

2. 가상요소 선택자

E:first-line

E 요소의 첫 번째 라인 선택

E:first-letter

E 요소의 첫 번째 문자 선택

E:before

E 요소의 시작 지점에 생성된 요소 선택

E:after

E 요소의 끝 지점에 생성된 요소 선택

3. CSS3 선택자 (IE 7, 8 지원)

E1 ~ E2

E 요소가 앞에 존재하면 F 요소를 선택
(E가 F보다 먼저 등장하지 않으면 선택X)

E[attr^=’val’]

‘attr’속성의 값이 ‘val’로 시작하는 요소 E 선택

E[attr$=’val’]

‘attr’속성의 값이 ‘val’로 끝나는 요소 E 선택

E[attr*=’val’]

‘attr’속성의 값에 ‘val’이 포함되는 요소 E 선택

4. CSS3 선택자

E:root

문서의 최상위 요소를 선택. html에서 이것은 항상 HTML 요소를 선택

E:nth-child(an+b)

부모 요소의 앞에서 an+b 번째 자식 요소를 선택

a : 요소를 a 개씩 그룹화 (남은 요소들은 마지막 그룹)
b : 각 그룹의 b 번째 요소
(n = 0, 1, 2, 3, ....)

• 홀수 번째 선택 : :nth-child(odd) = nth-child(2n+1)
• 짝수 번째 선택 : nth-child(even) = nth-child(2n)

클래스 이름으로 :nth-child를 사용할 경우, 클래스 이름보다 부모의 몇번째 자식이느냐를 더 우선하여 고려해야 한다. (타입은 고려되지 않음)

E:nth-last-child(an+b)

부모 요소의 뒤에서 an+b 번째 자식 요소를 선택

E:only-child

부모 요소의 유일한 자식인 E를 선택

E:empty

자식 요소가 없는 E를 선택 (텍스트 노드 포함)

E:nth-of-type(an+b)

부모를 가진 E 요소와 같은 타입인 요소들 중, an+b 번째로 앞에 있는 형제 요소를 선택

:nth-child와 똑같이 선택하나, 요소의 타입으로 필터링한 후 선택한다.
type 선택자들은 공통적으로 타입으로 필터링한 후 적용된다.

nth-child vs nth-of-type

E:nth-last-of-type(an+b)

부모를 가진 E 요소와 같은 타입인 요소들 중, an+b 번째로 뒤에 있는 형제 요소를 선택

E:first-of-type

부모를 가진 E 요소와 같은 타입인 요소들 중, 첫번째 형제 요소를 선택

E:last-of-type

부모를 가진 E 요소와 같은 타입인 요소들 중, 마지막 형제 요소를 선택

E:only-of-type

형제 요소들 중 유일한 타입인 E를 선택

only-child vs only-of-type

E:target

내부링크를 통해 타겟팅된 요소 E를 선택

E:enabled, E:disabled

사용 가능 혹은 불가능한 사용자 인터페이스 요소 E를 선택

display나 visibility 속성은 enabled/disabeld 상태와 상관 없다.

E:checked

유저가 체크한 라디오 혹은 체크박스 요소인 E를 선택

E:not(s)

선택자 S에 매치되지 않는 요소 E를 선택
:not은 중첩해서 사용할 수 없다.

E:valid, E:invalid

E:in-range

E:out-of-range

E:read-only

E:read-write

E:required

E:optional

​