css 선택자 모음

1. 전체 선택자

* {
  color:black;
}

2. 태그 선택자

body {
  width: 100vw;
  height: 100vh;
}
p {
  font-size: 10px;
}

3. Class 선택자

.box {
  border: 2px solid red;
}

4. ID 선택자

#selectedBox {
  background: blue;
}

4-1. Class vs ID

1. Class 선택자는 재사용성이 많은 스타일 (box) 에 , ID는 유일한 정보를 가지는 스타일 (selectedBox) 에 사용.
2. 우선순위는 ID가 Class 보다 높다.

5. div.box / div#selectedBox

태그 옆에 바로 Class 또는 ID가 붙는 경우는 해당 태그이면서 해당 Class 또는 ID인 선택자

6. div p vs div > p

태그 태그 : 자손 선택자
태그 > 태그 : 자식 선택자 (바로 직계만 해당)

7. 선택자 중복 시 우선순위

마지막에 적용된 스타일을 적용함.

<style>
  .blue {
  	color:blue;
  }
  .red {
  	color:red;
  }
</style>

중복 class 적용.html

<div class = "blue red"></div>
<div class = "red" blue"></div>

이 경우 두 태그 모두 마지막 스타일인 red를 적용함.

참고

선택자게임