CODEWITHSUNDEEP
htmlcss
dugla
dugla

Reputation: 12954

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

I am using the following css class selector for "fixing" sizing issues:

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

In the above for it applies to the entire DOM. For the embeddable Web component I an writing this is inappropriate as it can easily play havoc with the hosting Web app. I want the restrict these to a div with a specific class - lets call the class .knuth-style for grins - as well as all descendent elements. What is the syntax for writing this?

UPDATE 0

Ok, here's the thing I am happy to give Nit the ole check mark here but ... his solution does not actually work. Specifically - with the actual css class name I am 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:

enter image description here

After:

enter image description here

Not a pretty sight. Discuss?

UPDATE 1

Not as direct as a jsfiddle - too unweildly to excise the relevant bits - but I have something as good or better. The complete css class assignment for the DOM sub-tree in question.

Here is before using just the kleene star (all elements): enter image description here

And here is Nil's suggested solution: enter image description here

UPDATE 2

Ok, after a bit of css class renaming, Nil's solution is essentially correct. The one caveat: a rule of the 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 to work. However using a 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 to resort to pre-pending identical css class name prefixes to all decendent classes. No biggy.

Upvotes: 2

Views: 910

Answers (1)

Etheryte
Etheryte

Reputation: 25310

Simply add the 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;
}

Upvotes: 6

Related Questions