스타일 속성을 적용하는 요소를 '선택자(selector)'라고 부릅니다. 먼저 전체 선택자, 타입 선택자, 속성 선택자를 살펴보겠습니다.
목차
전체 선택자 (Universal Selector)
전체 선택자는 모든 HTML 요소를 선택합니다. 별표(
* )로 나타냅니다.
예를 들어 다음은 모든 요소의 색을 파란색으로 만듭니다.
* {
color: blue;
}
다른 선택자와 같이 사용할 때는 생략할 수 있습니다.
즉, 다음 둘은 같은 결과를 만듭니다.
*.abc {
color: blue;
}
.abc {
color: blue;
}
타입 선택자 (Type Selector)
타입 선택자는 <h1>, <p>,
<div>, <span> 등 HTML 요소(Element)를
선택하는 선택자입니다.
예를 들어 다음은 HTML 문서 안에 있는 모든 p 요소의 내용을 파란색으로 만듭니다.
p {
color: blue;
}
속성 선택자 (Attribute Selector)
속성 선택자는 특정 속성(attribute)을 갖고 있거나 특정 속성이 특정 값 등을 갖고 있는 요소(element)를 선택합니다. 속성 선택자는 다음과 같이 7가지 형태가 있습니다.
- [attribute]
- [attribute="value"]
- [attribute~="value"]
- [attribute|="value"]
- [attribute^="value"]
- [attribute$="value"]
- [attribute*="value"]
[attributename]
attributename 속성을 가진 요소를 선택합니다.
예를 들어 다음은 title 속성을 가진 h1 요소를 선택합니다.
h1[title]
[attributename=value]
attributename 속성의 값이 value인 요소를 선택합니다.
예를 들어 다음은 title 속성의 값이 abc인 h1 요소를 선택합니다.
h1[title="abc"]
주의할 점은 속성값이 정확히 일치해야 한다는 것입니다.
예를 들어
<h1 title="abc">Lorem</h1>
은 선택되지만,
<h1 title="abc xyz">Lorem</h1>
은 선택되지 않습니다.
[attributename~=value]
attributename 속성의 값이 value를 포함한 요소를 선택합니다.
h1[title~="abc"]
는 title 속성의 값이 abc를 포함한 h1 요소를 선택합니다. 포함 여부는 단어
기준으로 판단합니다.
예를 들어
<h1 title="abc xyz">Lorem</h1>
은 선택되지만,
<h1 title="abcxyz">Lorem</h1>
은 선택되지 않습니다.
[attributename|=value]
attributename 속성의 값이 value이거나 value-로 시작하는 요소를 선택합니다.
예를 들어
h1[title|="abc"]
는 title 속성의 값이 abc이거나 abc-로 시작하는 h1 요소를 선택합니다.
<h1 title="abc">Lorem</h1>
<h1 title="abc-xyz">Lorem</h1>
은 선택되고,
<h1 title="abc xyz">Lorem</h1>
은 선택되지 않습니다.
[attributename^=value]
attributename 속성의 값이 value로 시작하는 요소를 선택합니다.
예를 들어
h1[title^="abc"]
는 title 속성의 값이 abc로 시작하는 h1 요소를 선택합니다. 단어 기준이 아니라
문자열 기준입니다.
따라서
<h1 title="abc xyz">Lorem</h1>
<h1 title="abc-xyz">Lorem</h1>
모두 선택됩니다.
[attributename$=value]
attributename 속성의 값이 value로 끝나는 요소를 선택합니다.
예를 들어
h1[title$="abc"]
는 title 속성의 값이 abc로 끝나는 h1 요소를 선택합니다. 단어 기준이 아니라
문자열 기준입니다.
따라서
<h1 title="xyz abc">Lorem</h1>
<h1 title="xyz-abc">Lorem</h1>
모두 선택됩니다.
[attributename*=value]
attributename 속성의 값이 value를 포함한 요소를 선택합니다.
예를 들어
h1[title*="abc"] {}
는 title 속성의 값이 abc를 포함한 h1 요소를 선택합니다. 포함 여부는 문자열
기준으로 판단합니다.
따라서
<h1 title="abc xyz">Lorem</h1>
<h1 title="abcxyz">Lorem</h1>
<h1 title="lmn abc-xyz">Lorem</h1>
모두 선택됩니다.
CSS 선택자 유형
아이디 선택자, 클래스 선택자 하위 선택자, 자식 선택자, 형제 선택자, 인접 형제 선택자