| . |
.class {color:#fff;} |
클래스 선택자 |
CSS1 |
| # |
.id {color:#fff;} |
아이디 선택자 |
CSS1 |
| * |
* {color:#fff;} |
전체 선택자 |
CSS2 |
| element |
p {color:#fff;} |
요소 선택자 |
CSS1 |
| element, element |
p, div {color:#fff;} |
그룹 선택자 |
CSS1 |
| element element |
div p {color:#fff;} |
후손 선택자 |
CSS1 |
| element > element |
div > p {color:#fff;} |
자식 선택자 |
CSS2 |
| element + element |
div + p {color:#fff;} |
이웃 선택자 |
CSS2 |
| element ~ element |
div ~ p {color:#fff;} |
형제 선택자 |
CSS3 |
| [attribute] |
p [class] {color:#fff;} |
속성 선택자 |
CSS2 |
| [attribute=value] |
p [class="white"] {color:#fff;} |
속성 선택자 |
CSS2 |
| [attribute~=value] |
p [class~="white"] {color:#fff;} |
속성 선택자 |
CSS2 |
| [attribute^=value] |
p [attr^="w"] {color:#fff;} |
속성 선택자 |
CSS3 |
| [attribute*=value] |
p [attr*="white"] {color:#fff;} |
속성 선택자 |
CSS3 |
| [attribute$=value] |
p [attr$="w"] {color:#fff;} |
속성 선택자 |
CSS3 |
| :link |
a:link {color:#fff;} |
방문하지 않은 링크 |
CSS1 |
| :visited |
a:visited {color:#fff;} |
방문한 링크 |
CSS1 |
| :hover |
a:hover {color:#fff;} |
마우스 오버 링크 |
CSS1 |
| :active |
a:active {color:#fff;} |
활성화된 링크 |
CSS1 |
| :focus |
a:focus {color:#fff;} |
포커스된 링크 |
CSS2 |
| :root |
a:root {color:#fff;} |
문서의 루트 요소 |
CSS3 |
| :nth-child(n) |
p:nth-child(3) {color:#fff;} |
n번째 스타일 적용 |
CSS3 |
| :nth-last-child(n) |
p:nth-last-child(n) {color:#fff;} |
끝에서 n번째 스타일 적용 |
CSS3 |
| :nth-of-type(n) |
p:nth-of-type(n) {color:#fff;} |
n번째 스타일 적용 |
CSS3 |
| :nth-last-of-type(n) |
p:nth-last-of-type(n) {color:#fff;} |
끝에서 n번째 스타일 적용 |
CSS3 |
| ::first-letter |
p::first-letter {color:#fff;} |
첫 번째 문장 |
CSS1 |
| ::first-line |
p::first-line {color:#fff;} |
첫 번째 줄 |
CSS1 |
| :first-of-type |
p:first-of-type {color:#fff;} |
첫 번째 요소의 선택자 |
CSS3 |
| :last-of-type |
p:last-of-type {color:#fff;} |
마지막 번째 요소의 선택자 |
CSS3 |
| :only-of-type |
p:only-of-type {color:#fff;} |
해당 요소가 유일한 요소의 선택자 |
CSS3 |
| :first-child |
p:first-child {color:#fff;} |
첫 번째 자식요소 |
CSS3 |
| :last-child |
p:last-child {color:#fff;} |
마지막 자식요소 |
CSS3 |
| :only-child |
p:only-child {color:#fff;} |
자식요소가 유일하게 하나일 때 |
CSS3 |
| :only-of-child |
p:only-of-child {color:#fff;} |
해당 요소가 유일한 요소 일 때 |
CSS3 |
| :target |
:target {color:#fff;} |
연결 |
CSS3 |
| :enabled |
input[type="text"]:enabled {color:#fff;} |
사용할 수 있는 상태 |
CSS3 |
| :disabled |
input[type="text"]:disabled {color:#fff;} |
사용할 수 없는 상태 |
CSS3 |
| :checked |
input:checked {color:#fff;} |
체크된 상태 |
CSS3 |
| :in-range |
input:in-range {color:#fff;} |
인풋 요소의 라인을 설정합니다. |
CSS3 |
| :out-of-range |
input:out-of-range {color:#fff;} |
인풋 요소의 아웃라인을 설정합니다. |
CSS3 |
| :valid |
input:valid {color:#fff;} |
인풋 요소가 유효할 때 설정됩니다. |
CSS3 |
| :invalid |
input:invalid {color:#fff;} |
인풋 요소가 유효하지 않을 때 설정됩니다. |
CSS3 |
| :optional |
input:optional {color:#fff;} |
인풋 요소의 옵션에 설정됩니다. |
CSS3 |
| :read-only |
input:read-only {color:#fff;} |
인풋 요소를 읽었을 때 설정됩니다. |
CSS3 |
| :read-write |
input:read-write {color:#fff;} |
인풋 요소를 쓸 때 설정됩니다. |
CSS3 |
| :input:required |
input:required {color:#fff;} |
인풋 요소가 필수 일 때 설정됩니다. |
CSS3 |
| :lang(language) |
p:lang(it) {color:#fff;} |
언어설정에 따라 설정됩니다. |
CSS2 |
| :empty |
p:empty {color:#fff;} |
빈 상태 |
CSS3 |
| ::before |
p::before {content: "content";} |
요소 앞에 내용 추가 |
CSS3 |
| ::after |
p::after {content: "content";} |
요소 뒤에 내용 추가 |
CSS3 |
| ::selection |
::selection {color:#fff;} |
마우스로 선택했을 때 |
CSS3 |
| :not(seletor) |
:not(p) {color:#fff;} |
제외한 |
CSS3 |
