CSS 선택자
CSS는 기본적으로 선택자를 이용하여 스타일을 적용할 요소를 지정할 수 있다.
다양한 선택자에 대해서 알아보자.
기본 선택자
하나의 요소나 공통된 특징을 가진 요소를 선택하는 방법이다.
CSS에서 기본적으로 사용되는 선택자이니 잘 알아두어야 한다.
전체 선택자(*)
전체 선택자(universal selector)는 HTML 문서 내의 모든 요소를 선택한다.
html를 포함하는 모든 요소에 스타일을 적용하며, *(별표, 애스터리스크)를 사용하여 지정할 수 있다.
/* 모든 요소 선택 */
* {
color: red;
}타입 선택자(<>)
타입 선택자(type selector)는 태그 선택자, 요소 선택자로도 불리며 특정 태그를 선택하여 스타일을 적용한다.
/* h1 태그 선택 */
h1 {
color: blue;
}
/* p 태그 선택 */
p {
font-size: 12px;
font-weight: bold;
}동일한 태그라면 모두 스타일이 적용되기 때문에 세부 스타일을 적용하기보다는 공통 스타일을 사용하는데 주로 사용된다.
디자인에 따라 요소에 클래스나 아이디 선택자를 지정하여 사용하는 것을 권장한다.
아이디 선택자(#)
아이디 선택자(id selector)는 아이디를 사용하여 특정 요소를 선택한다.
# 뒤에 아이디를 작성하여 특정 요소를 선택한다.
아이디는 숫자로 시작할 수 없으며, 하이픈(-), 언더바(_), 문자로 시작할 수 있다.
/* id가 header인 요소 선택 */
#header {
color: blue;
}아이디는 HTML 페이지 내에서 고유한 값을 가진다.
아이디에 스타일을 적용할 경우 한 개의 요소에만 적용되기 때문에 재사용성은 떨어진다.
또한 CSS에서 우선순위가 높기 때문에 나중에 스타일을 변경하거나 덮어씌우기 어렵다.
때문에 CSS에서 아이디 선택자를 권장하진 않는다.
클래스 선택자(.)
CSS에서 가장 재사용성이 좋은 선택자가 바로 클래스 선택자이다.
여러 요소에 동일한 클래스를 주어 동일한 스타일을 적용할 수 있으며, 하나의 요소에 여러개의 클래스를 적용할 수 있다.
클래스는 숫자로 시작할 수 없으며, 하이픈(-), 언더바(_), 문자로 시작할 수 있다.
/* class에 more가 있는 모든 요소 선택 */
.more {
color: red;
}속성 선택자([])
속성 선택자는 HTML 요소의 속성을 기반으로 요소를 선택할 수 있다.
특정 속성을 가진 요소나 속성 값이 특정 패턴을 가진 요소를 선택할 수 있다.
[속성이름]
해당 속성을 가진 모든 요소를 선택한다.
/* title 속성이 있는 모든 요소 선택 */
[title] {
color: red;
}[속성이름="속성값"]
해당 속성에 속성값이 일치하는 모든 요소를 선택한다.
/* class가 text인 모든 요소 선택 */
[class='text'] {
color: red;
}값이 무조건적으로 일치 해야 하기 때문에, 만약 class에 text가 아닌 다른 class를 가지고 있다면 선택되지 않는다.
[속성이름~="속성값"]
공백으로 구분된 단어 목록 중 특정 단어를 포함하는 요소를 선택한다.
/* class에 공백을 기준으로 text 가 포함된 모든 요소 선택 */
[class~='text'] {
color: red;
}[속성이름|="속성값"]
특정 문자열만 포함하거나, 특정 문자열로 시작하면서 바로 하이픈(-)이 오는 요소를 선택한다.
/* class에 text 또는 text- 가 포함된 모든 요소 선택 */
[class|='text'] {
color: red;
}[속성이름^="속성값"]
특정 문자열로 시작하는 요소를 모두 선택한다.
/* class가 text로 시작하는 모든 요소 선택 */
[class^='text'] {
color: red;
}[속성이름$="속성값"]
특정 문자열로 끝나는 요소를 모두 선택한다.
/* class가 text로 끝나는 모든 요소 선택 */
[class$='text'] {
color: red;
}[속성이름*="속성값"]
속성을 포함한 값을 가진 모든 요소를 선택한다.
/* class에 text 값이 포함된 모든 요소 선택 */
[class*='text'] {
color: red;
}그룹 선택자(,)
그룹 선택자(group selector)는 여러 개의 선택자를 쉼표(,)로 구분하여 한 번에 동일한 스타일을 적용할 수 있다.
그룹 선택자를 이용하여 중복된 코드를 줄이고 스타일을 일관되게 적용할 수 있다.
/* h1과 h2와 h3 */
h1,
h2,
h3 {
color: red;
}사과, 바나나, 수박 등과 같이 여러가지를 나열할 때 사용하는 콤마(,)를 이용하여 그룹 선택을 할 수 있다.
복합 선택자
여러 가지 선택자를 조합하여 더 구체적으로 요소를 선택할 수 있다.
문서의 구조에 따라 유연하게 스타일링을 줄 수 있다.
자손 선택자( )
자손 선택자(descendant selector)는 특정 요소의 모든 하위 요소를 선택한다.
요소와 요소 사이를 공백(띄어쓰기)으로 구분한다.
/* section 태그 안에 있는 모든 p 태그 */
section p {
color: red;
}자식 선택자(>)
자식 선택자(child selector)는 특정 요소의 직계 자식 요소만 선택한다.
요소와 요소 사이에 > 기호를 사용하여 선택한다.
/* section 태그 바로 아래에 있는 모든 p 태그 */
section > p {
color: red;
}일반 형제 선택자(~)
선택한 요소 뒤에 나오는 같은 항렬의 요소를 선택한다.
일반 형제 선택자는 ~를 사용하여 구분한다.
/* section 태그 뒤에 나오는 모든 p 태그 */
section ~ p {
color: red;
}section 안에 있는 p가 아닌 section 뒤에 나오는 p임을 기억해야 한다.
같은 항렬에 있는 p 중에 section보다 뒤에 나오는 p만을 선택한다.
인접 형제 선택자(+)
선택한 요소 바로 뒤에 나오는 같은 항렬의 요소 하나를 선택한다.
인접 형제 선택자는 +를 사용하여 구분한다.
/* section 태그 바로 뒤에 나오는 p 태그 하나 */
section + p {
color: red;
}일반 형제 선택자는 section 뒤에 나오는 모든 p를 선택하지만, 인접 형제 선택자는 바로 뒤에 나오는 딱 하나의 p만 선택한다.
심화 선택자
:focus-visible
:focus와 유사하지만 :focus는 포커스된 요소에 항상 적용되는 반면, :focus-visible은 좀 더 선택적으로 작동합니다.
선택자 우선순위
CSS는 여러 선택자를 사용하기 때문에 한 요소가 여러번 선택이 될 수 있고, 그만큼 다양한 스타일이 적용될 수 있다.
이 경우 동일한 속성이 적용될 수 있는데 이때 최종적으로 어떤 속성이 적용될 지 결정하는 규칙이 있다.
이러한 규칙을 선택자 우선순위라고 한다.
후자 우선의 원칙
CSS에서는 동일한 선택자에 동일한 속성이 여러번 정의되는 경우, 가장 마지막에 정의된 스타일이 적용된다.
/* 가장 마지막에 작성된 blue가 적용 */
p {
color: red;
color: green;
color: blue;
}구체성(명시도, Specificity)의 원칙
얼마나 구체적으로 요소를 지정하는지에 따라 우선순위가 달라진다.
구체적으로 선택할 경우 우선순위가 높다.
/* style.css */
div p {
color: red;
}
p {
color: blue;
}<!-- index.html -->
<div>
<p>Hello</p>
</div>div 안에 p가 있는 경우, 그냥 p를 선택하는 것보다 div 안에 p를 선택한 것이 더 구체적이다.
그러므로 p는 빨간색이 적용된다.
가중치 계산 방법
구체성 가중치 계산하는 방법을 알아보자.
- inline-style -> 1000점
- id (#) -> 100점
- class (.), 속성 선택자([]), 가상 클래스(::) -> 10점
- 타입 선택자, 가상요소 선택자(:) -> 1점
- 전체 선택자 (*) -> 0점
/* style.css */
#container p {
color: blue;
} /* 구체성: 100 + 1 */
div .text {
color: red;
} /* 구체성: 10 + 1 */
p {
color: green;
} /* 구체성: 1 */<!-- index.html -->
<div id="container">
<p class="text">Hello, World!</p>
</div>위와 같은 경우, id 선택자가 class 선택자보다 구체성이 높이 때문에 색상은 blue가 된다.
구체성 계산 예시
구체성을 계산의 예시를 함께 보자.
* { } /* 구체성: 0 */
li { } /* 구체성: 1 (요소 선택자) */
li:first-child { } /* 구체성: 11 (1 + 10) */
ul li { } /* 구체성: 2 (1 + 1) */
ul ol+li { } /* 구체성: 3 (1 + 1 + 1) */
h1 + *[rel=up] { } /* 구체성: 11 (1 + 10) */
ul ol li.red { } /* 구체성: 13 (1 + 1 + 1 + 10) */
li.red.level { } /* 구체성: 21 (1 + 10 + 10) */
#x34y { } /* 구체성: 100 (ID 선택자) */
style="" /* 구체성: 1000 (인라인 스타일) */일반적으로 스타일은 구체성 점수를 더한 값을 비교하여 적용된다.
이때 유의할 점으로, 유형 선택자의 가중치는 클래스 선택자보다 우선될 수 없다는 것이다.
예를 들어 클래스 + 유형(10 + 1)은 11점, 클래스는 10점, 유형으로 12개는 총 12점이지만 실제로 적용되는 스타일은 클래스 + 유형(10 + 1)의 값이다.
명시도 계산 도움
명시도 계산이 쉽지 않기 때문에 필요하다면 명시도 계산에 도움이 되는 사이트를 참고할 수 있다.
- 명시도 계산기 사이트
Specificity Calculator - 명시도 그림으로 보기
CSS Specificity
중요성의 원칙
!important 선언은 다른 모든 선언보다 우선하기 때문에 선택자 우선순위에 직접적인 영향을 미친다.
이는 매우 강력한 도구이지만, 남용하면 CSS의 예측 가능성과 유지보수성을 해칠 수 있다.
p {
color: blue;
}
.important {
color: red !important;
}!important는 억지로 해당 속성을 적용시키는 것으로, CSS의 자연스러운 상속을 깨트려 오류/버그 발생 시 수정을 어렵게 만든다.
일반적으로는 사용하는 것을 권장하지 않으나, 아래와 같은 상황에서 사용할 수 있다.
- 외부 라이브러리 CSS 재정의
- 유틸리티 클래스가 항상 적용되도록 보장해야 할 때
재미있게 선택자 공부하기
선택자를 공부하다 보면 복잡하고 어려워서 재미없을 수 있다.
재미있게 공부할 수 있도록 만들어진 선택자 사이트가 있다.
CSS Diner
CSS 선택자를 이용해서 접시에 있는 음식을 선택하는 게임이다.
관심있는 사람들은 해보길 권한다.
CSS Speedrun
CSS 선택자를 이용하여 빠르게 문제를 맞추는 게임이다.
CSS Diner보다는 어렵고 딱딱한 느낌의 게임이지만 해볼만 하다.
