[CSS] 기본+복합 선택자 정리

CSS 공부를 하다가 생소한 선택자를 마주했다.

 

선택자 사이에 +를 넣는 인접 형제 선택자와 ~을 넣는 일반 형제 선택자였다.

모르는 게 있으면 그냥 넘어가질 않는 성격이라 이번에도 모르는 게 나온 김에 선택자를 전부 다시 공부했다.

 

선택자는 항상 쓰던 것만 써서 몰랐는데 생각 보다 많은 선택자가 있더라.



패스트캠퍼스 react&redux 강의 교안을 참고했다.

 

<div>
 <ul>
  <li>지수</li>
  <li class="you">태양</li>
  <li id="me">민철</li>
  <li>영철</li>
  <li>수진</li>
 </ul>
 <div>수영</div>
 <p>태정</p>
 <span class="you">호진</span>
</div>

설명을 위해 예시 코드를 작성하였다.

위 코드를 기준으로 선택자를 설명하겠다.

 

1. 전체 선택자

* {
 color: green;
}

전체 선택자 *는 문서 내에 모든 요소를 선택한다.

 

2. 태그 선택자

p {
 color: green;
}

태그 선택자는 태그 이름을 통해 그 태그의 요소를 선택한다.

 

3. 아이디 선택자

#me {
 color: blue;
}

아이디 선택자는 id 속성의 값을 통해 해당 요소를 선택한다.

 

4. 클래스 선택자

.you {
 color: red;
}

클래스 선택자는 class 속성의 값을 통해 해당 요소를 선택한다.

 

5. 일치 선택자

span.you {
 color: aqua;
}

일치 선택자는 두 선택자를 동시에 만족하는 요소를 선택한다.

(띄어쓰기를 하지 않음에 주의하자. 띄어쓰기를 하면 하위 선택자가 된다.)

 

6. 자식 선택자

ul > .you {
 color: orange;
}

자식 선택자는 '> 기호'를 통해 자식 요소를 선택한다.

 

7. 후손(하위) 선택자

div .you {
 color: gray;
}

후손(하위) 선택자는 '띄어쓰기'를 통해 하위(후손) 요소를 선택한다.

 

8. 인접 형제 선택자

#me + li {
 color: pink;
}

인접 형제 선택자는 '+ 기호'를 통해 다음 형제 요소 하나를 선택한다.

 

9. 일반 형제 선택자

#me ~ li {
 color: purple;
}

일반 형제 선택자는 '~ 기호'를 통해 다음 형제 요소를 모두 선택한다.

 

 

가상 선택자는 다음 글에 이어서 작성