default
[selector] {
[property] : [value];
[property] : [value];
}
Type Selector - 요소 선택자
HTML 태그 이름으로 요소 선택.
<p> 요소를 선택하는 예
p {
[property] : [value];
}
Class Selector - 클래스 선택자
태그 속성의 class 를 조회하여 선택
.className {
[property] : [value];
}
Id Selector - 아이디 선택자
태그 속성의 id 를 조회하여 선택
#idName {
[property] : [value];
}
Attribute Selector - 속성 선택자
태그 속성을 조회하여 선택.
title 속성이 지정된 <a> 요소를 선택하는 선택자
a[title] {
[property] : [value];
}
속성 선택자의 종류
|
Selector |
선택되는 요소 |
지원 CSS level |
|
E[attr] |
[attr] 속성을 갖는 요소 |
level 2 |
|
E[attr=value] |
[attr] 속성값이 value 와 일치하는 요소 |
level 2 |
|
E[attr~=value] |
[attr] 속성값이 value 를 포함하는 요소 |
level 2 |
|
E[attr|=value] |
[attr] 속성값이 value 와 일치 또는 value로 시작되는 요소 |
level 2 |
|
E[attr^=value] |
[attr] 속성값이 value 로 시작하는 요소 |
level 3 |
|
E[attr$=value] |
[attr] 속성값이 value 로 끝나는 요소 |
level 3 |
|
E[attr*=value] |
[attr] 속성값이 value 를 포함하는 요소 |
level 3 |
Pseudo Selector - 가상 요소 선택자
요소의 상태를 조회하여 선택
마우스를 올려놓았을때 a 요소를 선택하는 예
a:hover {
[property] : [value];
}
가상 요소 선택자의 종류
|
Selector |
선택되는 요소 |
지원 level |
|
E:link |
아직 방문하지 않은 링크 요소 |
level 1 |
|
E:visited |
이미 방문한 링크 요소 |
level 1 |
|
E:hover |
마우스를 올려 놓았늘 때 링크 요소 |
level 1 |
|
E:active |
클릭 또는 Enter 로 활성화된 링크 요소 |
level 1 |
|
E:focus |
포커스를 받은 링크 요소 |
level 1 |
|
E:target |
내부 앵커의 목적지가 된 요소 |
level 3 |
|
E:enabled |
사용 가능 상태의 폼 요소 |
level 3 |
|
E:disable |
사용 불가 상태의 폼 요소 |
level 3 |
|
E:checked |
체크 상태의 체크 박스나 라디오 버튼 |
level 3 |
Structural Pseudo Selector - 구조적 선택자
Pseudo Selector 와 같지만 요소의 상태가 아니마 HTML 의 구조를 조회한다.
<table> 에서 짝수번째 요소중 <tr> 요소를 선택하는 예
tr:nth-child(even) {
[property] : [value];
}
구조적 선택자 의 종류
|
Selector |
선택되는 요소 |
지원 level |
|
E:root |
페이지의 최상위 요소(<html> 요소) |
level 3 |
|
E:nth-child(n) |
n번째 요소가 e와 같을때 선택 |
level 3 |
|
E:nth-last-child(n) |
역순으로 n 번때 요소가 E 와 같을때 선택 |
level 3 |
|
E:nth-of-type(n) |
E와 타입의 요소 중 n 번째 요소를 선택함 |
level 3 |
|
E:nth-last-of-type(n) |
E와 타입의 요소 중 역순으로 n 번때 요소를 선택 |
level 3 |
|
E:first-child |
첫 번째 요소가 E 라면 선택 |
level 2 |
|
E:last-child |
마지막 요소가 E 라면 선택 |
level 3 |
|
E:first-of-type |
E 와 같은 타입 요소 중 첫 번째 요소를 선택 |
level 3 |
|
E:last-of-type |
E 와 같은 타입 요소 중 마지막 요소를 선택 |
level 3 |
|
E:only-child |
E 가 유일한 자식 요소인 경우 선택 |
level 3 |
|
E:only-of-type |
E 타입의 자식 요소가 하나뿐일때 선택 |
level 3 |
|
E:empty |
자식 요소를 포함 하지 않는 요소를 선택 |
level 3 |
|
E:not(S) |
S가 아닌 E 요소를 선택 |
level 3 |
