CSS 선택기

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;}