개발자의 메모장

기본 선택자 (Basic Selectors)

1. 전체 선택자 (Universal Selector)

*
모든 요소를 선택한다.

2. 태그 선택자 (Type Selector)

E
태그 이름이 E인 요소를 선택한다.

예제

li {
    color: red; 
}

<div>
  <ul>
    <li>마우스</li> <!-- Selected -->
    <li>키보드</li> <!-- Selected -->
  </ul>
  <span>사과</span>
</div>

3. 클래스 선택자 (Class Selector)

.E
HTML class 속성 값이 E인 요소를 선택한다.

4. 아이디 선택자 (ID Selector)

#E
HTML id 속성 값이 E인 요소를 선택한다.

복합 선택자 (Combinators)

1. 일치 선택자 (Basic Combinator)

EF
E와 F를 동시에 만족하는 요소를 선택한다.

예제

span.orange {
    color: red;
}

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

2. 자식 선택자 (Child Combinator)

E > F
E의 자식 요소 F를 선택한다.

3. 후손(하위) 선택자 (Descendent Combinator)

E F
E의 후손(하위) 요소 F를 선택한다.
띄어쓰기가 선택자의 기호로 사용된다.

4. 인접 형제 선택자 (Adjacent Sibling Combinator)

E + F
E의 다음 형제 요소 F 하나만 선택한다.

예제

.orange + li {
    color: red; 
}

<ul>
  <li>딸기</li>
  <li>수박</li>
  <li class="orange">오렌지</li>
  <li>망고</li> <!-- Selected -->
  <li>사과</li>
</ul>

5. 일반 형제 선택자 (General Sibling Combinator)

E ~ F
E의 다음 형제 요소 F를 모두 선택한다.

예제

.orange ~ li {
      color: red;
}

<ul>
  <li>딸기</li>
  <li>수박</li>
  <li class="orange">오렌지</li>
  <li>망고</li> <!-- Selected -->
  <li>사과</li> <!-- Selected -->
</ul>