Multiple class declarations

This will be my first real post, I decided to make it a small tip just to get things off.

It’s possible to declare multiple classes for an element using a space-separated list

<p class="strong em">paragraph</p>


This will make the element respond to both class-values for the CSS, making the above paragraph text both bold and italic.

p.strong {
  font-weight: bold;
}
p.em {
  font-style: italic;
}


It’s also possible to target elements that only carries both values, using a dot between all the class-attributes you want to catch. In this case, all paragraphs that have class-values of both strong and em will also get a red background.

p.strong.em {
  background: red;
}