[CSS] Chaining

안녕하세요 동기 여러분! 오늘은 CSS에서의 체이닝에 대해 알아봅시다!

 

Chaining

CSS에서 속성 선택자(Attribute selector)를 지정할 때 HTML의 요소와 두 가지 이상의 CSS 선택자를 한 번에 사용할 수 있습니다.

 

예를 들어 아래와 같은 HTML 코드가 있습니다.

<h2 class='operation'>주먹이 곧 나의 무기요.</h2>
<h2>주먹이 곧 나의 무기요.</h2>
<p class='operation'>주먹이 곧 나의 무기요.</p>

CSS 코드로 다음과 같은 코드를 적용하면 첫 번째 "주먹이 곧 나의 무기요."에게만 적용이 됩니다.

h2.operation {
  color: red;
}

 

다음 예로는 아래와 같은 HTML 코드가 있습니다.

<h2 class='operation italic'>주먹이 곧 나의 무기요.</h2>
<h2>주먹이 곧 나의 무기요.</h2>
<p class='operation'>주먹이 곧 나의 무기요.</p>

 

CSS 코드로 두 가지의 경우의 코드를 적용하면 첫 번째 "주먹이 곧 나의 무기요."에게만 적용이 됩니다.

1번 CSS코드

h2.operation.italic {
  color: red;
  font-style: italic;
}

또는

2번 CSS코드

h2.operation {
  color: red;
}

.italic {
  font-style: italic;
}

 

이때 2번 CSS코드를 가지고 아래와 같은 HTML 코드를 작성하면 결과가 달라집니다.

<h2 class='operation italic'>주먹이 곧 나의 무기요.</h2>
<h2>주먹이 곧 나의 무기요.</h2>
<p class='operation italic'>주먹이 곧 나의 무기요.</p>    <!-- class italic을 추가하였음 -->

 

<p>태그에 class 'operation'은 적용이 되지 않지만 italic은 적용이 되는 것을 확인할 수 있습니다.

 

---

 

h2.operation { color: red; } 처럼 연쇄적인 선택자를 CSS 체이닝이라고 합니다.

※CSS 코드를 작성할 때 class가 중첩이 되면 h2.operation.abc.omg.lol와 같은 방법으로 .으로 구분하지만 HTML의 요소가 중첩이 되면 header ol li와 같은 방법으로 공백으로 구분합니다. (이 내용은 다음시간에 자세히 알아봅시다.)

 

 

---

 

오늘의 느낌

요즘 여인천하를 보면서 느끼는 건데 가족 간에는 절대 자존심이나 체면 세우지 말고 진심을 말하고 전하는 것이 정말 중요하다고 생각합니다.