How to override CSS Box Sizing for just one area on page?

css, html, twitter-bootstrap

Solution

Nevermind just got it:

.tinymce-editor *,
.tinymce-editor *:before,
.tinymce-editor *:after {
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

Problem

I have the following CSS inside my Twitter Bootstrap file: ``` *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ``` It is causing a problem with my TinyMCE editor, mainly the resizing of the textarea. Anyway if I remove the above code all is good, but obviously I need it in place cause otherwise the rest of Bootstrap breaks. So how do I override the above for just TinyMCE? I tried this: ``` .tinymce-editor, .tinymce-editor:before, .tinymce-editor:after { -webkit-box-sizing: content-box !important; -moz-box-sizing: content-box !important; box-sizing: content-box !important; } ``` But no luck. `.tinymce-editor` happens to be the div that my editor is inside.

Original source