html - How to restrict the css star selector * to a class and all decendants? -

i using following css class selector "fixing" sizing issues:

*, *:after, *:before {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box; } 

in above applies entire dom. embeddable web component writing inappropriate can play havoc hosting web app. want restrict these div specific class - lets call class .knuth-style grins - descendent elements. syntax writing this?

update 0

ok, here's thing happy give nit ole check mark here ... solution not work. - actual css class name using:

.grid-container-colorpicker, .grid-container-colorpicker:after, .grid-container-colorpicker:before .grid-container-colorpicker *, .grid-container-colorpicker *:after, .grid-container-colorpicker *:before {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box; } 

before:

after:

not pretty sight. discuss?

update 1

not direct jsfiddle - unweildly excise relevant bits - have or better. complete css class assignment dom sub-tree in question.

here before using kleene star (all elements):

and here nil's suggested solution:

update 2

ok, after bit of css class renaming, nil's solution correct. 1 caveat: rule of form:

.knuth-style *, .knuth-style *:after, .knuth-style *:before {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box; } 

does not appear work. using class attribute approach does:

[class*='knuth-'], [class*='knuth-']:after, [class*='knuth-']:before {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box; } 

i had resort pre-pending identical css class name prefixes decendent classes. no biggy.

simply add necessary selectors?

.knuth-style, .knuth-style:after, .knuth-style:before  .knuth-style *, .knuth-style *:after, .knuth-style *:before {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box; }