csscss-selectors

CSS rule to apply only if element has BOTH classes

Let's say we have this markup:

<div class="abc"> ... </div>
<div class="xyz"> ... </div>
<div class="abc xyz" style="width: 100px"> ... </div>

Is there a way to select only the <div> which has BOTH abc and xyz classes (the last one) AND override its inline width to make the effective width be 200px?

Something like this:

[selector] {
  width: 200px !important;
}
Solution 
  • div.abc.xyz {
    /* declarations go here */
}

    ... or simply:

    .abc.xyz {
    /* declarations go here */
}