Universal 선택기 - *
* { color: black;}
Type 선택자 - 타입명 {}
p {color: red;}
Class 선택기 - .클래스이름
.myClass { color: red;}
Id 선택기 - #아이디이름
#myId { color: red;}
attribute 선택기 - 타입[속성="속성값"]
presence, value 선택기
| 선택자 |
예시 |
설명 |
| [attr] |
a[href] |
해당 요소에 해당 속성이 존재하는 경우 |
| [attr=value] |
a[href="#"] |
해당 요소에 해당 속성의 값이 일치하는 경우 |
| [attr~=value] |
a[class~="myClass"] |
해당 요소에 해당 속성의 값이 일치하거나 (공백으로 구분된) 값 목록에 포함되는 경우 (ex. class="myClass red"같은 경우) |
| [attr|=value] |
div[lang|="en"] |
해당 요소에 해당 속성의 값이 일치하거나 바로 뒤에 하이픈(-)으로 값이 이어지는 경우(ex. lang="en-us") |
substring matching 선택기
| 선택자 |
예시 |
설명 |
| [attr^=value] |
div[class^="box-"] |
해당 요소의 해당 속성 값이 value로 시작하는 경우 |
| [attr$=value] |
div[class$="-box"] |
해당 요소의 해당 속성 값이 value로 끝나는 경우 |
| [attr*=value] |
div[class*="box"] |
해당 요소의 해당 속성 값의 어디 부분에서나 value를 포함하는 경우 |
a[href="#"] { color: red;}
의사 클래스 - 타입:의사클래스
button:hover { background-color: red;}
의사 요소 - 타입::의사요소
p::first-line { color: red;}