원하는 요소를 골라내는 기술 — CSS 선택자

<p>이 문단은 검은색</p>
<p>이 문단은 빨간색으로 만들고 싶어!</p>
<p>이것도 검은색</p>

h1 { color: navy; }
p { font-size: 16px; }
a { color: orange; }

<p class="highlight">이 문단만 강조됩니다.</p>
<p>이 문단은 기본 스타일</p>
<p class="highlight">이것도 강조됩니다.</p>

.highlight {
  color: red;
  font-weight: bold;
}

<p class="big bold red">크고 굵고 빨간 텍스트</p>

.big { font-size: 24px; }
.bold { font-weight: bold; }
.red { color: red; }

<h2 id="main-title">메인 제목</h2>

#main-title {
  color: purple;
  text-decoration: underline;
}

/* nav 안에 있는 a 태그만 */
nav a {
  color: white;
  text-decoration: none;
}

/* .card 안에 있는 p 태그만 */
.card p {
  font-size: 14px;
  color: gray;
}

button:hover {
  background-color: darkblue;
  color: white;
}

a:hover {
  text-decoration: underline;
}

/* ul의 첫 번째 li */
li:first-child {
  font-weight: bold;
}

/* ul의 마지막 li */
li:last-child {
  color: gray;
}

/* 짝수 번째 행에 배경색 (표에서 유용) */
tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* 홀수 번째 */
tr:nth-child(odd) {
  background-color: white;
}

/* 3번째 */
li:nth-child(3) {
  color: red;
}

input:focus {
  border-color: blue;
  outline: 2px solid lightblue;
}

* {
  box-sizing: border-box;  /* 나중에 배울 중요한 설정 */
  margin: 0;
  padding: 0;
}

<p id="intro" class="highlight">어떤 색이 될까요?</p>

p { color: black; }          /* 태그: 가장 낮음 */
.highlight { color: blue; }  /* 클래스: 중간 */
#intro { color: red; }       /* 아이디: 높음 */

인라인 style="" > #아이디 > .클래스 > 태그

<ul>
  <li class="important">첫 번째 항목 (빨간색)</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
  <li class="important">네 번째 항목 (빨간색)</li>
  <li>다섯 번째 항목</li>
</ul>

<button>버튼</button>