css3 - CSS Deprecate single class when there are 2 classes -

there div, , has 2 class names.

like - <div class="a b">

what want if there .a.b {}, deprecated .a{} , .b{} styles, use .a.b{} style.

is possible?

if element has class a, has class a, , can't "turn off" adding class b. can think of 3 approaches:

"normal" approach

define properties in .a.b rule override properties in .a or .b rules.

.a   { color: blue;  } .b   { color: green; } .a.b { color: red;   } 

or, if want "undo" individual .a , .b rules when both classes present, then:

.a.b { color: initial; } 

initial special value means, basically, default value, or inherited value inherited properties.

using all

there all shorthand property refers css properties. should not use this, because it's sort of sledgehammer,

.a.b { all: initial; } 

this reset properties on .a.b elements, including ones specified in individual .a , .b rules, initial values. other values all property include inherit , unset. see documentation details.

using :not

another possibility rewrite a , b rules exclude case both specified together, using :not. however, bit of blunt knife may cut with, , won't scale more classes.

.a:not(.b) { /* rules */  } .b:not(.a) { /* rules b */  } .a.b       { /* rules both , b */ }