CSS 선택자 - 기본 선택자와 복합 선택자

 

---

 

CSS 선택자

 

< 기본 선택자 >

 

전체 선택자 

- ( * ) 사용

- 모든 요소 선택

* {
  font-size: 24px;
  color: #ccc;
}

 

태그 선택자

- html 태그 이름으로 요소 선택

div {
  width: 200px;
  height: 100px;
  background-color: #333;
}

 

클래스 선택자

- html 클래스 속성 값으로 요소 선택

- 앞에 마침표 ( . )를 붙여 클래스 선택자임을 표시

.box {
  background-color: #fff;
  margin: 20px;
}

 

아이디 선택자

- html 아이디 속성 값으로 요소 선택

- 앞에 해시 ( # )를 붙여 클래스 선택자임을 표시

#box {
  display: flex;
}

 

 

< 복합 선택자 >

 

일치 선택자

- 선택자 두 개를 동시에 만족하는 요소 선택

- 선택자 두 개를 붙여서 사용

span.box {
  width: 200px;
  height: 200px
}
-> span이면서 box클래스 속성을 가진 요소에 적용

divsapn { }
->태그 선택자만 사용x
.boxspan { }
->클래스와 태그를 같이 사용할 땐 구분 가능하도록 태그 먼저 사용
->위 표시는 boxspan이라는 클래스 선택자로 인식 됨.

 

자식 선택자

- 선택자의 자식 요소 선택

- 꺽쇠괄호를 닫아 표시

ul > .orange {
  color: red;
}

=> ul의 자식 요소 중 orange 클래스 속성을 가진 요소 선택

 

하위 선택자

- 선택자의 하위 요소 선택

- 띄어쓰기가 선택자의 기호

ul .orange {
  color: red;
}

=> ul의 하위 요소 중 orange 클래스 속성을 가진 요소 선택

 

인접 형제 선택자

- 선택자 다음 형제 요소 하나를 선택

<ul class="fruits">
  <li class="apple">사과</li>
  <li class="orange">오렌지</li>
  <li>망고</li>
  <li>포도</li>
</ul>

.orange + li {
  color: yellow;
}

=> orange 클래스 선택자의 다음 형제 요소인 <li> 태그 한 개 선택 --> 망고

 

일반 형제 선택자

- 선택자 다음 형제 요소 모두를 선택

<ul class="fruits">
  <li class="apple">사과</li>
  <li class="orange">오렌지</li>
  <li>망고</li>
  <li>포도</li>
</ul>

.apple ~ li {
  color: red;
}

=> apple 클래스 선택자 다음 li 요소 모두 선택 --> 오렌지, 망고, 포도