CSS 선택자 6가지

01 전체 선택자

✦ * { box-sizing: border-box } → 모든 요소에 적용

✦ * { margin: 0; padding: 0 } → 이 페이지 전체 초기화됨

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

02 타입 선택자

p 태그 → 보라색 굵게

span 태그 → 분홍색 작게

p    { color: purple; font-weight: bold; }
span { color: pink; font-size: 0.85rem; }

03 클래스 선택자

.pill-purple .pill-pink .pill-green

.pill-purple { background: purple; }
.pill-pink   { background: pink; }
.pill-green  { background: green; }

04 ID 선택자

⭐ #unique-box — 페이지에서 딱 하나만 존재하는 고유 요소입니다.

#unique-box {
  background: linear-gradient(...);
  border: 1.5px solid purple;
}

05 속성 선택자

input[type="text"]     { border-color: purple; }
input[type="password"] { border-color: pink; }
a[href^="https"]       { color: green; }

06 가상 클래스 / 요소 선택자

::before로 앞에 화살표 추가됨

a:hover       { color: red; }
li:first-child { font-weight: bold; }
p::before      { content: "▶ "; }