선택자의 종류

1. Universal selector

전체 선택자이며 아래와 같이 조합해서 사용한다.

{
*

ns | *

* | *

| *
}

MDN 예시

* [lang^=en] {
  color: green;
}

*.warning {
  color: red;
}

*#maincontent {
  border: 1px solid blue;
}

.floating {
  float: left
}

/* automatically clear the next sibling after a floating element */
.floating + * {
  clear: left;
}

2. Type selector

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

div {
}

a {
}

h1{
}

3. Class selector

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

.info-section{
}

4. Id selector

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

#cosutomer-name{
}

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

div, a

, 로 구분하여 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 태그를 전부 선택한다.