CSS - 선택자

전체 선택자 (Universal Selector)

* {
 color : blue;
}

[ * }

모든 요소를 선택한다

 

태그 선택자 (Type Selector)

li {
 color: blue;
 }

[ABC]

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

 

클래스 선택자 (Class Selector)

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

.blue {
  color: blue;
 }

[.ABC]

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

 

아이디 선택자 ( ID Selector)

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

#blue {
  color:blue;
}

[#ABC]

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>
  	<li class="blue">파랑</li>
  </ul>
  <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 date-animal="dog">강아지</span>

[disabled] {
  color: gray;
}

[data-animal] {
  color: white
}

[ABC]

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

2. [attr="value"]

[type="text"] {
  color: white;
}

[ABC="XYZ"]

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