CSS) 선택자(selector)

선택자 4가지 - 기본 선택자(Basic Selector)

1. 전체 선택자(Universal Selector)
(요소 내부의) 모든 요소를 선택

* 별표시를 선택

css

* {
	color: red;
}

* : 전체를 선택

html

<div> 
  <ul>
    <li> 사과 </li>
    <li> 딸기 </li>
    <li> 오렌지 </li>
  </ul>
  <div> 당근 </div>
  <p> 토마토 </p>
  <span> 오렌지 </span>
</div>

 

출력

 

2. 태그 선택자(Type Selector)
태그이름이 (div, span, h, p ...)인 요소 선택 

css

li {
  color: red;
}

li 앞뒤에 아무런 기호가 없으면 '태그 선택자' 이다.
li 태그만 선택

html

<div> 
  <ul>
    <li> 사과 </li>
    <li> 딸기 </li>
    <li> 오렌지 </li>
  </ul>
  <div> 당근 </div>
  <p> 토마토 </p>
  <span> 오렌지 </span>
</div>

 

출력

 

3. 클래스 선택자(Class Selector)
HTML class 속성의 값이 .className 인 요소 선택
'.' 이 찍혀있으면 'class속성'을 말하는 것이다.
많이 사용된다.

css

.orange {
  color: red;
}

 

html

<div> 
  <ul>
    <li> 사과 </li>
    <li> 딸기 </li>
    <li class="orange"> 오렌지 </li>
  </ul>
  <div> 당근 </div>
  <p> 토마토 </p>
  <span class="orange"> 오렌지 </span>
</div>

 

출력

 

 

4. 아이디 선택자(ID Selector)
HTML id속성의 값이 #ID(고유값)인 요소 선택
'#' 이 찍혀있으면 'ID선택자'다.
중요하게 사용된다.

css

.orange {
  color: blue;
}
#orange {
  color: red;
}

 

html

<div> 
  <ul>
    <li> 사과 </li>
    <li> 딸기 </li>
    <li id="orange" class="orange"> 오렌지 </li>
  </ul>
  <div> 당근 </div>
  <p> 토마토 </p>
  <span class="orange"> 오렌지 </span>
</div>

 

출력

▷ 오렌지라는 글자는 모두 클래스 선택자를 가지고 있고, 위의 하나의 오렌지라는 글자에만 id선택자를 가진다.
출력결과를 보면 id선택자(#orange)[빨간색]가 가지는 값이 클래스 선택자(.orange)[파란색]가 가지는 값보다 우위에 있음을 알 수 있다.