[CSS] 선택자

전체 선택자 (Universal Selector)

* {
  color: blue;
}

모든 요소를 선택한다.

 

태그 선택자 (Type Selector)

li {
  color: blue;
}

태그 이름으로 요소를 선택한다.

 

클래스 선택자 (Class Selector)

<li class="blue">파랑</li>

.blue {
  color: blue;
}

HTML class 속성의 값으로 요소를 선택한다.

 

아이디 선택자 (ID Selector)

<li id="blue">파랑</li>

#blue {
  color: blue;
}

HTML id 속성의 값으로 요소를 선택한다.

 

일치 선택자 (Basic Combinator)

<span class="blue">파랑</span>

span.blue {
  color: blue;
}

[ABCXYZ]

선택자 ABC 와 XYZ 를 동시에 만족하는 요소를 선택한다.

 

자식 선택자 (Child Combinator)

<ul>
  <li class="blue">파랑</li>
</ul>

ul > .blue {
  color: blue;
}

[ABC > XYZ]

선택자 ABC 의 자식 요소인 XYZ 를 선택한다.

 

하위 선택자 (Descendant Combinator)

<div>
  <ul>
    <!-- div .blue -->
    <li class="blue">파랑</li>
  </ul>
  <!-- div .blue -->
  <span class="blue">파랑</span>
</div>

div .blue {
  color: blue;
}

[ABC XYZ]

선택자 ABC 의 하위 요소인 XYZ 를 선택한다.

띄어쓰기’ 가 선택자의 기호이다.

 

인접 형제 선택자 (Adjacent Sibling Combinator)

<ul>
  <li>빨강</li>
  <li>노랑</li>
  <li class="blue">파랑</li>
  <li>초록</li>
  <li>보라</li>
</ul>

.blue + li {
  color: blue;
}
/* 초록 */

[ABC + XYZ]

선택자 ABC 의 다음 형제 요소인 XYZ 하나를 선택한다.

 

일반 형제 선택자 (General Sibling Combinator)

<ul>
  <li>빨강</li>
  <li>노랑</li>
  <li class="blue">파랑</li>
  <li>초록</li>
  <li>보라</li>
</ul>

.blue ~ li {
  color: blue;
}
/* 초록, 보라 */

[ABC ~ XYZ]

선택자 ABC 의 다음 형제 요소 XYZ 모두를 선택한다.

---

속성 선택자 (Attribute Selector)

1. [attr]

<input type="text" value="1234" disabled />
<span data-cute-animal="cat">고양이</span>

[disabled] {
  color: gray;
}

[data-cute-animal] {
  color: pink;
}

[ABC]

속성 ABC 를 포함한 요소를 선택한다.

 

2. [attr="value"]

[type='text'] {
  color: pink;
}

[ABC="XYZ"]

속성 ABC 를 포함하면서 값이 XYZ 인 요소를 선택한다.