CSS 기본 선택자

아래 예시는 HTML p element의 글자색을 red로 설정하라는 CSS 문법이다. 이처럼 CSS에서는 선택자를 설정하고, 선언문을 통해 속성과 속성값을 선언함으로써 특정 HTML element에 스타일을 적용할 수 있다. 

 

p { color: red; }
// 선택자 { 속성: 속성값; }

 

선택자를 설정하는 것은 곧, 많은 HTML element 중에서 어떤 element에 스타일을 적용할지 결정하는 것이다.

 

선택자는 한 HTML 문서의 전체 element를 선택하는 전체 선택자부터, 특정 ID를 속성값으로 가진 element만을 선택하는 ID 선택자까지, 스타일을 적용하고자 하는 조건에 따라 추상적으로 선택하는 방법과 구체적으로 선택하는 방법이 그 정도에 따라 다양하게 존재한다.

 

또, '버튼이 클릭 되었을 때', '마우스를 버튼 위에 올렸을 때' 등 상태에 따른 선택자도 있으며, 이처럼 넓은 범위의 선택폭은 인터렉티브 한 웹 어플리케이션에 다채로운 스타일을 적용할 수 있게 한다.

 

본 글에서는 CSS 선택자 중에서도 가장 기본이 되는 선택자를 추상적인 선택자에서 더 구체적인 선택자 순으로 알아본다.

 

 

1. 전체 선택자 (*)

HTML element 전체를 선택하는 선택자이며, 가장 추상적인 선택자이다.

 

* {
  color: red;
}

위 예시 코드의 경우 문서 내 모든 HTML 태그에 color: red; 스타일이 적용된다.

 

 

2. 유형 선택자 (element-name)

HTML element의 유형을 선택자로 하여, 문서 내 해당 element 전부에 스타일을 적용하는 선택자이다. 

 

li {
  color: red;
}

 

 

위와 같이 코드를 작성하면 li element의 글자색을 red로 설정하라는 선언문에 따라 HTML 문서 내 모든 li element 원소의 색이 red로 설정된다.

 

 

3. 클래스 선택자 (.class-name)

클래스 이름을 선택자로 하여, 해당 클래스를 갖고 있는 모든 element에 스타일을 적용한다. 

 

li {
  color: red;
}
.list-item {
  color: blue;
}

 

li element에 기본적으로 color: red;를 적용하고, li element 중 list-item이라는 클래스를 가진 element의 color를 blue로 설정하면, 모든 li element의 color값은 red이지만 해당 클래스를 가진 li element만 color값이 blue가 된다.

 

 

4. ID 선택자 (#ID-name)

ID를 선택자로 하여, 해당 ID 값을 갖고 있는 element의 스타일을 변경하며, 본 글에서 다룬 선택자 중 가장 구체적이다.

 

HTML 문서에서 한 element가 공백으로 구분된 여러 개의 클래스를 가질 수 있는 것과 달리 한 element는 하나의 ID만을 가질 수 있고, 한 ID는 문서 내 고유한 값이어야 하기에, ID 선택자를 활용하면 한 element를 특정지어 스타일을 적용할 수 있다. 

source: MDN Web Docs

 

li {
  color: red;
}
.list-item {
  color: blue;
} 
#specific-list-item {
  color: yellow;
}

 

만약 문서 내 모든 li의 color값이 red, list-item 클래스를 가진 li의 color값이 blue로 적용되어 있다고 가정하면,

ID 선택자를 활용하면 list-item 클래스가 적용된 li element 중에서도 특정 ID(예시의 경우 specific-list-item)를 가진 li element만을 선택하여 스타일을 변경할 수 있다.

 

 

선택자 우선순위

전체 선택자에서 ID 선택자까지 살펴보며, 더 구체적인 선택자로 적용한 스타일이 추상적인 선택자로 적용한 스타일을 덮어쓴다는 것을 확인했다. 그렇다면 더 구체적인 선택자가 우선적으로 선택되는 원리는 무엇일까?

 

바로 선택자 우선순위 규칙에 의해서이다.

 

본 글에서 다룬 선택자로만 한정 지어 우선순위의 대소관계를 정리하면 다음과 같다.

 

ID 선택자 > 클래스 선택자 > 유형 선택자 > 전체 선택자

 

ID 선택자 한 개 당 100점의 우선순위 점수 부여

클래스 선택자 한 개 당 10점의 우선순위 점수 부여

유형 선택자 한 개 당 1점의 우선순위 점수 부여

전체 선택자는 0점의 우선순위 점수 부여

 

그리고 이와 같은 규칙에 따라 더욱 구체적인 선택자로 적용된 스타일이 추상적인 선택자로 적용된 스타일보다 우선적으로 적용된다.

 

 

참고자료

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors#%EA%B8%B0%EB%B3%B8_%EC%84%A0%ED%83%9D%EC%9E%90

CSS 선택자 - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/id

id - HTML: Hypertext Markup Language | MDN

https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes#attr-class

전역 특성 - HTML: Hypertext Markup Language | MDN

http://www.devdic.com/css/refer/documents/document:1806/%EC%84%A0%ED%83%9D%EC%9E%90(Selector)%EC%9D%98-%EC%9A%B0%EC%84%A0-%EC%88%9C%EC%9C%84 

선택자(Selector)의 우선 순위::CSS 레퍼런스