html

4) 선택자 (2)

1. CSS 선택자(Selector)

선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 됩니다.

2. 선택자의 종류

체인(chain) 선택자

체인 선택자는 아래와 같이 한 요소에 여러개의 클래스가 지정된 경우에 사용한다.

- 사용법

HTML
<div class="class1">class1</div>
<div class="class2">class2</div>
<div class="class1 class2 class3">.class1.class2.class3</div>

CSS
.class1, .class2 {
  background-color: blue;
}
.class1.class2.class3 {
  background-color: green;
}

자식(child) 선택자

부모 요소의 직계 자식(손자는 제외)을 모두 선택한다. 아래의 예에서는 body가 부모이고, p가 자식이다.

- 사용법

body > p {
  color:#fff;
}

형제(sibling) 선택자

형제 선택자는 앞에 지정된 요소 이후의 모든 형제요소에 적용된다.

- 사용법

HTML
<p>First</p>
<h1>Heading</h1>
<p>Sibling</p>
<p>Sibling</p>

CSS
h1 ~ p {
  background-color: green;
}

인접 형제(adjacent sibling) 선택자

인접 형제 선택자는 앞에 지정된 요소 이후로 가장 근접한 하나의 형제요소에만 적용된다. 아래의 예제 코드는 h1 이후로 가장 근접한 p요소 만을 찾는다.

- 사용법

HTML
<h1>Heading</h1>
<p>First Sibling</p>
<p>Second Sibling</p>

CSS
h3 + p {
  background-color: green;
}

속성(attribute) 선택자

속성만 선택자로 이용한 경우와 속성의 값까지 이용한 경우로 나뉜다.

- 요소[속성]

속성만 선택자로 이용한 경우와 속성의 값까지 이용한 경우로 나뉜다.

p[title] {
  padding: 5px;
  border: 1px solid gray;
}

일부 브라우저는 <p title=" ">과 같이 속성값이 비어 있는 요소는 선택하지 않으니 주의하자.

- 요소[속성=값]

지정된 특정 속성의 값에 특정 단어가 포함된 요소를 선택한다.

p[title="love"]

특정 값이 포함된 단어를 선택한다.

HTML
<p title="First love">

CSS
p[title~="love"]

특정 값으로 시작되는 요소를 선택한다.

HTML
<p title="lovelikeu">

CSS
p[title^="love"]

특정 값으로 끝나는 요소를 선택한다.

HTML
<p title="Lastlove">

CSS
p[title$="love"]