/* 1. 태그 선택자 — 모든 <p> */
p { color: gray; }

/* 2. 클래스 선택자 — class="highlight" 인 모두 */
.highlight { background: yellow; }

/* 3. ID 선택자 — id="main" 인 것 (페이지에 1개만) */
#main { padding: 20px; }

/* 4. 속성 선택자 — type="submit" 인 input */
input[type="submit"] { background: blue; }

/* 5. 가상 클래스 — 호버 상태 */
button:hover { background: green; }

/* 자식 선택자 (직계) */
nav > a { color: red; }     /* nav 의 직접 자식 a */

/* 후손 선택자 (모든 깊이) */
nav a { color: blue; }       /* nav 안의 모든 a */

/* 형제 선택자 */
h2 + p { margin-top: 0; }    /* h2 *바로 다음* p */
h2 ~ p { color: gray; }      /* h2 *이후 모든* p */

a:hover    { color: red; }       /* 마우스 올렸을 때 */
a:active   { color: orange; }    /* 클릭하는 순간 */
a:visited  { color: purple; }    /* 방문한 링크 */
input:focus { border: 2px solid blue; }   /* 포커스 받았을 때 */
input:disabled { opacity: 0.5; }
li:first-child { font-weight: bold; }     /* 첫 자식 */
li:last-child  { border: 0; }
li:nth-child(2n) { background: #eee; }    /* 짝수 (얼룩말 무늬) */

/* ❌ 매우 나쁨 */
body > main > article > div.container > ul > li > a.btn { ... }

/* ✅ 좋음 */
.btn-primary { ... }

/* Block__Element--Modifier */
.card { ... }                  /* Block */
.card__title { ... }           /* Element */
.card__title--large { ... }    /* Modifier */