Majid Fouladpour Majid Fouladpour - 2 months ago 12
CSS Question

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;
}

Answer
div.abc.xyz {
    /* rules go here */
}

... or simply:

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