선택자 정리

CSS에서 스타일링 해줄 요소는 '선택자'로 결정합니다.

우리가 이미 알고 있는 것들부터 시작해서, 또 어떤 선택자들이 있는지 살펴봅시다!

태그 이름

HTML

<h1>Heading 1</h1>
<h2>Heading 2</h2>

CSS

/* 모든 <h1> 태그 */
h1 {
  color: orange;
}

 

 

클래스/아이디

HTML

<p class="important">Paragraph 1</p>
<p>Paragraph 2</p>
<p class="important">Paragraph 3</p>
<p class="important">Paragraph 4</p>
<p id="favorite">Paragraph 5</p>
<p>Paragraph 6</p>

CSS

/* 'important'라는 클래스를 갖고 있는 모든 태그 */
.important {
  color: orange;
}

/* 'favorite'라는 아이디를 갖고 있는 태그 */
#favorite {
  color: blue;
}

 

 

자식 (children)

HTML

<i>Outside</i>
<div class="div1">
  <i>Inside 1</i>
  <p>Blah blah <i>Inside 2</i></p>
  <i>Inside 3</i>
</div>

CSS/* 'div1' 클래스를 갖고 있는 요소의 자식 중 모든 <i> 태그 */
.div1 i {
  color: orange;
}

 

 

직속 자식 (direct children)

HTML

<i>Outside</i>
<div class="div1">
  <i>Inside 1</i>
  <p>Blah blah <i>Inside 2</i></p>
  <i>Inside 3</i>
</div>

CSS

/* 'div1' 클래스를 갖고 있는 요소의 직속 자식 중 모든 <i> 태그 */
.div1 > i {
  color: orange;
}

 

 

복수 선택

HTML

<p class="one">Outside 1</p>
<p class="two">Outside 2</p>
<div>
  <p class="one">Inside 1</p>
  <p class="two">Inside 2</p>
  <p class="three">Inside 3</p>
  <p class="four">Inside 4</p>
  <p class="five">Inside 5</p>
</div>

CSS

/* 'two' 클래스를 가지고 있는 태그 모두와 'four' 클래스를 가지고 있는 태그 모두 선택 */
.two, .four {
  color: orange;
}

 

 

여러 조건

HTML

<p class="outside one">Outside 1</p>
<p class="outside two">Outside 2</p>
<div>
  <p class="inside one">Inside 1</p>
  <p class="inside two">Inside 2</p>
  <p class="inside three">Inside 3</p>
  <p class="inside four">Inside 4</p>
  <p class="inside five">Inside 5</p>
</div>

 

 

CSS/* 'outside' 클래스를 갖고 있으면서 'one' 클래스도 갖고 있는 태그 */
.outside.one {
  color: blue;
}

/* 'inside' 클래스를 갖고 있으면서 'two' 클래스도 갖고 있는 태그 */
.inside.two {
  color: orange;
}

 

 

Pseudo-class (가상 클래스)

콜론(:)을 사용하면 몇 가지 '가상 클래스'를 선택할 수 있습니다.

n번째 자식

HTML

<div class="div1">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
  <p>Paragraph 4</p>
  <p>Paragraph 5</p>
  <p>Paragraph 6</p>
</div>

CSS

/* .div1의 자식인 <p> 태그 중 3번째 */
.div1 p:nth-child(3) {
  color: blue;
}

/* .div1의 자식인 <p> 태그 중 첫 번째 */
.div1 p:first-child {
  color: red;
}

/* .div1의 자식인 <p> 태그 중 마지막 */
.div1 p:last-child {
  color: green;
}

/* .div1의 자식 중 마지막 자식이 아닌 <p> 태그 */
.div1 p:not(:last-child) {
  font-size: 150%;
}

/* .div1의 자식 중 첫 번째 자식이 아닌 <p> 태그 */
.div1 p:not(:first-child) {
  text-decoration: line-through;
}

 

 

마우스 오버 (hover)

HTML

<h1>Hello World!</h1>

CSS

h1 {
  color: orange;
}

/* 마우스가 <h1> 태그에 올라갔을 때 */
h1:hover {
  color: green;
}