CSS 선택자

선택자

HTML 문서에 기술된 tag, class, id 등을 활용하여 특정 HTML 요소를 선택하는 것.

 

선택자의 종류

1. Universal selector

*

ns | *

* | *

| *

 

전체 선택자. 위와 같이 조합해서 사용 가능하다.

 

2. Type selector

요소 이름 (태그 이름) 의 모든 요소를 선택한다.

 

3. Class selector

지정한 클래스 이름을 가진 모든 요소를 선택한다.

 

4. Id selector

지정한 아이디 하나를 선택한다.(고유)

 

5. Attirbute selector

태그가 가진 속성을 이용하여 선택한다.

 

input [attr]

- 해당 속성을 가지고 있는 input 모두 선택

 

input [attr = "val"]

- 해당 속성의 값을 가지고 있는 input 모두 선택

 

input[attr ~= "val"] 

- 해당 속성의 값인 val 을 포함하고 있는 input 모두 선택

 

input[attr ^= "val"]

- 해당 속성의 값인 val 로 시작하는 input 모두 선택

 

input[attr $= "val"]

- 해당 속성의 값인 val 로 끝나는 input 모두 선택

 

input[attr *= "val"]

- 해당 속성의 값인 val 을 포함하는 input 모두 선택

 

input[attr |= "val"]

- 정확하게 val 혹은 val 로 시작되는 input 모두 선택

 

 

6. Grouping selectors

a, b

 

, 로 구분하여 a 와 b 요소를 전부 선택한다.

 

7. 복합 선택자

 

div p

하위 선택자 지정 문법.

div 의 자손 p 를 지정한다.

자식의 자식까지 지정한다. 즉, div 태그 안에 속해있는 p 태그를 전부 선택한다.

 

div > p

자식 선택자 지정 문법.

div 의 자식 p 를 선택한다.

자식의 자식은 보지 않는다. 즉, div 태그 바로 밑에 있는 자식 p 만 선택한다.

 

div + ul 

인접형제 선택자 지정 문법.

h1 동생 ul 만 지정한다.

div 의 형제 (즉, 바로 뒤 따라오는 태그) 가 ul 일 경우 선택한다. ul 이 아닌 다른 태그가 올 경우 선택하지 않는다.

 

div ~ ul

일반 형제 선택자.

ul 의 형이 div 태그라면, 동생 ul 태그를 전부 선택한다.

 

div || ul

잘 모르겠음. (---수정할 것)

 

그 외 가상클래스 선택자, 구조적 가상 클래스 선택자, 언어 선택자, 부정 선택자 등이 있다.

 

 

선택자의 우선 순위

!important > id [ 100 ] > class [ 10 ] > tag [ 1 ] > * [ 0 ]

기본적으로 이 순으로 우선 순위가 매겨지며, 나중에 정의한 선택자의 스타일을 우선으로 한다.

 

 

REF : 

https://www.w3schools.com/css/css_selectors.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#Selectors

http://www.nextree.co.kr/p8468/