[Edit]

CSS - style only elements with multiple classes

1 contributors

2 contributions

0 discussions

3 points

Created by:

Palpys

764

In this article, we would like to show you how to style only those elements that have multiple classes using CSS.

Quick solution:

xxxxxxxxxx
 
.class-1.class-2.class-N {  /* <div class="class-1 class-2 class-N"></div> */
    color: red;
}

Where:

class-1, class-2, ... , class-N are class names assigned to the HTML element at once.

Practical example

Edit

In this example, we present how to style only those elements, that have assigned both class-1 and class-2 to them.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
​
    .class-1.class-2 {
        background: yellow;
    }
​
  </style>
</head>
<body>
  <div class="class-1 class-2">Element with "class-1" and "class-2"</div>
  <div class="class-1">Element with "class-1"</div>
  <div class="class-2">Element with "class-2"</div>
</body>
</html>