❗️ 해당 글은 패스트캠퍼스 - 프론트엔드 개발 강의에서 HTML & CSS, SASS(SCSS) Part의 박영웅 강사님의 강의자료를 정리한 것입니다.

기본 선택자(Basic Selectors)

전체 선택자(Universal Selector)

모든 요소를 선택

* {
	color: red;
}

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

태그 선택자(Type Selector)

같은 태그 이름을 가진 모든 요소를 선택

li {
	color: red;
}

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

클래스 선택자(Class Selector)

같은 class 속성의 값을 가진 모든 요소 선택

.orange {
	color: red;
}

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

아이디 선택자(ID Selector)

같은 id 속성 값을 가진 요소 선택

#orange {
	color: red;
}