CSS에서 여러 클래스로 요소 선택하기

필요하다면, 두 클래스 중 하나만 가진 요소는 건드리지 않고, 동시에 두 클래스를 모두 가진 요소만 선택할 수 있습니다.

예제를 통해 살펴보겠습니다. 다음과 같은 코드가 있다고 가정해 보죠:

html<p class="eee">
  This is a paragraph with text.
</p>
<p class="zzz">
  This is a paragraph with text.
</p>
<p class="eee zzz">
  This is a paragraph with text.
</p>

보시다시피, 첫 번째 단락은 eee 클래스를, 두 번째 단락은 zzz 클래스를, 세 번째 단락은 이 두 클래스를 동시에 가지고 있습니다.

다른 단락들은 건드리지 않고 마지막 단락만 선택해 보겠습니다. 이를 위해서는 클래스 이름들을 공백 없이 붙여서 작성하면 됩니다:

css.eee.zzz {
  color: red;
}

html<p class="eee">
  This is a paragraph with text.
</p>
<p class="zzz">
  This is a paragraph with text.
</p>
<p class="ccc">
  This is a paragraph with text.
</p>
<p class="eee zzz ccc">
  This is a paragraph with text.
</p>