[CSS] CSS 선택자 기본 정리

<style>

p {
	color:red;
}

</style>

---

1. 전체 선택자

HTML 문서 내의 모든 태그에 같은 속성을 적용합니다.

* { color: red;}

 

2. 태그 선택자

지정된 태그명을 가지는 모든 요소에 같은 속성을 적용합니다.

p { color: red; }

모든 p 태그를 가지는 요소를 선택합니다.

 

3. 클래스 선택자

주어진 class 속성값을 가지는 모든 요소에 같은 속성을 적용합니다.

.class1 { color: red; }
div.class1 { color: blue; }

1.  <p class="class1">paragraph</p> 와 같이 class 속성값이 class1인 요소를 선택합니다.

2. <div class="class1">paragraph</div>와 같이 div 태그이며, class 속성값이 class1인 요소를 선택합니다.  <p class="class1">paragraph</p> 는 선택되지 않습니다.

 

4. ID 선택자

주어진 id 속성값을 가지는 요소에 속성을 적용합니다. 한 id 속성값은 HTML 문서에서 한 번만 등장해야 합니다. (class- 중복 사용 가능 / id - 중복 사용 불가능)

#id1 { color: red; }
#id1 p { color: blue; }

1. <p id="id1">paragraph</p>와 같이 id 속성값이 id1인 요소를 선택합니다.

2. p태그 중 부모의 id 속성값이 id1인 p태그만을 선택합니다.

 

 

---

선택자 우선순위는 ID 선택자 > 클래스 선택자 > 태그 선택자 > 전체 선택자 로,

선택하는 대상이 구체적일수록 우선순위가 높습니다.

 

- 2020/05/23 수정