CSS 선택자는 스타일을 지정할 HTML 요소를 지정할 때 사용된다.
선택자는 5가지 유형으로 분류되며 그 종류도 다양하다. 이번 포스트에서는 자주 사용하는 선택자와 선택자 우선 순위에 대해서 정리한다.
기본적으로 사용하는 선택자:
- 전체 선택자
- 태그 선택자
- 아이디 선택자
- 클래스 선택자
- 태그와 함께 쓰는 선택자
- 하위 선택자
- 자식 선택자
- 그룹 선택자
5가지 유형과 다른 선택자에 대해 자세히 보고싶다면 링크를 참조할 것
전체, 태그, 아이디, 클래스, 태그와 함께 쓰는 선택자
/* 전체 선택자 */
* {
font-weight: bold;
}
/* 태그 선택자 */
p {
color: red;
}
/* 아이디 선택자*/
#selector {
color: green;
}
/* 클래스 선택자 */
.selector {
color: blue
}
/* 태그와 함께 쓰는 선택자 */
p.selector{
color: orange;
}<p> 1. 내용 </p> <p class="selector"> 2. 내용 </p> <p id="selector"> 3. 내용 </p> <span class="selector"> 4. 내용 </span>
| 선택자 종류 | 설명 | 예제 – 적용되는 요소 |
|---|---|---|
| 전체 선택자 | 전체 요소 선택 | 1,2,3,4 번 |
| 태그 선택자 | p 태그 요소 선택 | 1,2,3번 |
| 아이디 선택자 | 아이디가 ‘selector’인 요소 선택 | 3번 |
| 클래스 선택자 | 클래스가 ‘selector’인 요소 선택 | 2,4번 |
| 태그와 함께 쓰는 선택자 | p 태그 요소 중 클래스가 ‘selector’인 요소 선택 | 2번 |
하위, 자식, 그룹 선택자
/* 하위 선택자 */
div span{
color: red;
}
/* 자식 선택자 */
div > span{
color: blue;
}
/* 그룹 선택자 */
h1, p span{
font-style: italic;
}<h1> CSS selectors </h1> <div> <span>A CSS selector selects the HTML elements you want to style</span> <p> The element selector selects <span> HTML elements </span> based on the element name </p> </div>
예제 결과 화면:
| 선택자 종류 | 사용 방법 | 설명 |
|---|---|---|
| 하위 선택자 (descendant selector) | 스페이스 | div 태그 하위의 모든 span 선택 (자식 span 뿐만 아니라 손자, 증손자 span 등 하위 모든 span 선택) |
| 자식 선택자 (child selector) | > | div 태그의 자식 span 선택 (손자, 증손자 span은 선택되지 않음. 자식 span만 선택) |
| 그룹 선택자 (grouping selector) | , | 같은 속성 및 값을 가진 요소를 콤마(,)로 연결하여 선택 |
CSS 선택자 적용 우선 순위 (Specificity Hierarchy)
어떤 요소의 스타일을 지정하는 두 개 이상의 css가 있을 경우, 브라우저는 아래의 우선순위를 따라서 스타일을 적용한다. 간단하게는 전체 선택자(*)의 순위가 가장 낮고, 아이디 선택자(#)의 순위가 높다. 스타일을 지정했는데 생각대로 적용되지 않는 경우 다른 스타일의 우선 순위에 밀려서 그런 경우가 많다.
선택자 적용 우선순위
| 우선순위 | 선택자 |
| 0 | ! important |
| 1 | 인라인 스타일 |
| 2 | 아이디 선택자 |
| 3 | 클래스 선택자 |
| 4 | 태그 선택자 |
선택자 우선순위 예제1 – 인라인 > 클래스 > 태그 > 전체 선택자
<h1 class="intro" style="color:red;" > CSS selectors </h1> <div> <p> <span class="intro"> A CSS selector <span> selects the HTML elements you want to style </p> </div>
.intro {color: blue;}
h1 {color: gray;}
* {color: green;}우선순위 예제1 결과 화면:
CSS 코드에 지정된 스타일보다, HTML 코드에서 인라인으로 지정한 (style=”color:red;”)의 우선 순위가 높기 때문에 CSS Selectors 텍스트가 빨간색으로 나타난다.
선택자 우선 순위 예제2 – 상세한 선택이 우선 순위가 높음
<h1 > CSS selectors </h1> <div> <p> <span class="intro"> A CSS selector <span> selects the HTML elements you want to style </p> </div>
div span.intro { color: green; }
div span { color: blue; }우선 순위 예제2 결과 화면:
div span 보다 div span.intro가 더 상세하게 요소를 지정했기 때문에 div span.intro이 우선 순위가 더 높다. 따라서 텍스트 색상이 파란색이 아니라 초록색으로 표시된다.
실제로는 선택자 별로 점수를 합산해서 우선순위를 계산한다는데, 굳이 그럴필요까진 없고 상세하게 설명한것이 더 우선순위가 높다는 정도만 알고있으면 될 것 같다.
그 외 – !imporant에 대하여
!important는 선택자 우선 순위를 모두 무시하고 항상 0순위로 스타일을 적용한다. 하지만 !important 사용은 지양하는 것이 좋다. 우선 순위를 무시하기에 디버깅을 어렵게 만들기 때문이다.
링크에서는 다음과 같이 설명한다
- !important를 사용 하기 전에 다른 방법이 없나 고민해 볼 것
- 외부 CSS를 재정의하며 페이지 별 CSS일때 만 !important를 사용할 것
- 플러그인이나 매시업을 만들때는 절대 사용하지 말 것
- 전체 사이트에 적용되는 CSS에서는 절대 사용하지 말 것
!important를 사용하는 대신 선택자 우선순위를 이용해서 스타일을 적용하는 방법을 권하며, 외부 CSS (부트스트랩 등) 또는 inline 스타일을 재정의 할 때만 사용하라고 한다.