CSS 선택자 정리

CSS의 선택자는 MDN Web Docs의 CSS selectors와 W3Schools의 CSS Selectors, CSS Selector Reference에 자세히 정리되어 있다.

---

기본 선택자

• 전체 선택자(Universal Selector): 모든 태그 선택

* {
  color: red;
}

• 태그 선택자(Type Selector): 태그 이름으로 선택

li {
  color: red;
}

• 클래스 선택자(Class Selector): HTML 태그의 class 속성의 값으로 선택

<li class="orange">오렌지</li>

.orange {
  color: red;
}

• 아이디 선택자(ID Selector): HTML 태그의 ID 값으로 선택

<li id="orange">오렌지</li>

#orange {
  color: red;
}

복합 선택자

• 일치 선택자(Basic Combinator): 두 가지 조건을 동시에 만족하는 태그 선택

<span class="orange">오렌지</span>

span.orange {
  color: red;
}

• 자식 선택자(Child Combinator): 특정 태그의 자식 태그 선택

<ul>
  <li class="orange">오렌지</li>
</ul>

ul>.orange {
  color: red;
}

• 후손(하위) 선택자(Descendant Combinator): 특정 태그의 후손(하위) 태그를 선택

<div>
  <ul>
    <li class="orange">오렌지</li>
  </ul>
</div>

div .orange {
  color: red;
}

• 인접 형제 선택자(Adjacent Sibling Combinator): 특정 태그의 다음 형제 태그 하나 선택

<ul>
  <li class="orange">오렌지</li>
  <li>망고<li>  <-- 선택 -->
</ul>

.orange + li {
  color: red;
}

• 일반 형제 선택자(General Sibling Combinator): 특정 태그의 다음 형제 태그 모두 선택

<ul>
  <li>딸기</li>
  <li class="orange">오렌지</li>
  <li>망고</li>  <-- 선택 -->
  <li>사과</li>  <-- 선택 -->
</ul>

.orange ~ li {
  color: red;
}

가상 클래스 선택자

특정 상황에서만 작동하는 클래스를 가상 클래스(pseudo-classes)라 함

• 특정 태그들에서만 사용 가능한 가상 클래스 선택자

a:hover {
  color: red;
}

a:active {
  color: red;
}

input:focus {
  background-color: orange;
}

• first-child: 지정 된 선택자가 형제 태그 중 첫 번째이면 선택

<div class="fruits">
  <span>딸기</span>  <-- 선택 -->
  <span>오렌지</span>
</div>

.fruits span:first-child {
    color: red;
}

• last-child: 지정 된 선택자가 형제 태그 중 마지막이면 선택

<div class="fruits">
  <span>딸기</span>
  <div>오렌지</div>  <-- 미선택 -->
  <h3>사과</h3>
</div>

.fruits div:last-child {
  color: red;
}

• nth-child: 지정 된 선택자가 형제 태그 중 n 번째이면 선택

<div class="fruits">
  <span>딸기</span>
  <div>오렌지</div>  <-- 선택 -->
  <h3>사과</h3>
</div>

.fruits *:nth-child(2) {
  color: red;
}

.fruits *:nth-child(2n) {  /* 짝수번째 선택 */
  color: red;
}

가상 태그 선택자

선택자에 키워드로 추가되어 선택된 태그의 특정 요소에만 스타일을 적용하는 것을 가상 태그(pseudo-elements)라 함

• before/after: 지정 된 선택자 내부의 앞/뒤에 가상의 태그를 만들어 내용(content) 삽입하는 가상 태그로, 인라인 태그로 생성됨

<div class="box">
  content
</div>

.box::before {
  content: "앞";
}

.box::after {
  content: "뒤";
}

속성 선택자

특정 속성을 포함한 태그를 선택함

<input type="text" value="qwer" disabled>

[disabled] {
  color: red;
}

[type="text"] {
  color: red;
}