CSS Selector exception

Question

I have a external css for reset that apply to all table, td, div, etc.. In my website, there is a customer template that allow user to create their desire content in html.

When view this customer template in webpage, I don't want to apply above external css.
So I put this customer template content into a div, and trying to exclude this div and all childs of it from css.

Is it possible to write css selector to select all table, td, div, etc... which are not child of given div id?

Below is my testing html code and reset.css The content of div customtemplate is dynamic enter by user. User try border=1 to table, it apply all table cell to border 1 without reset.css. But with reset css, there is no border appears. My users are not html/css professional, so they will create simple html and expect to display as they write in their test page. If their html not appear exactly the same for all browsers, it is up to them.
I have no responsible for it. I just need to display their html in div without reset.css. Anyway to solve ?

            <html>
            <head>
                <link href="reset.css" type="text/css" rel="stylesheet"/>
            </head>
            <body>
                <div class="customtemplate">
                    <table border="1" cellpadding="10px">
                        <tr>
                            <td>abcd</td><td>def</td>
                        </tr>
                        <tr>
                            <td>hello</td><td>world</td>
                        </tr>
                    </table>
                </div>
                <br><br>
                <table>
                    <tr>
                        <td>default</td><td>reset</td>
                    </tr>
                    <tr>
                        <td>style</td><td>using</td>
                    </tr>
                </table>
            </body>
            </html>


            table, td {
                border: 0;
                padding: 0;
            }

score 1 · Answer 1 · answered Mar 05 '12 at 11:12

1

The right way would be to define YOUR defaults for that div. The reset CSS helps you avoid the problems that are caused by different default values in browsers. So for that div with the given ID, you should define some sensible defaults, which are different from the defaults used on the site, but still can be expected to be the same default on every browser.

For example:

/* reset.css */

p { margin: 0; }

/* yourdefaults.css */

#yourdiv p { margin-bottom: 10px; }

answered Mar 05 '12 at 11:12

kapa

77,694
21
158
175

I can't fix the style for the content of customer template. It is free for user to write their desire html and inline style. The problem they design their html page in a test page and copy the html to our site. Their page look good at test page, but not display as expected in our site because of our reset style. I couldn't know and restrict style for customer template, just need to display as it without any external css apply. – zawmn83 Mar 06 '12 at 02:56
@zawmn83 You are damned then. Whatever you do, the stuff they do does not have a chance to display the same way in every browser. You need some kind of defaults for that. Their HTML might display well with the defaults of Chrome for example, but with the defaults of IE8, it might be crap. You should force including your CSS on them, otherwise you will just remain damned. – kapa Mar 06 '12 at 08:22
Thanks for your reply, I edited my question to include sample code. Please check and help – zawmn83 Mar 06 '12 at 10:54
@zawn83 Maybe use an `iframe` (not the best option for this, but your requirements seem so special). Or get rid of the reset CSS and write shitty HTML yourself also... I would not let stupid people write HTML for my site. Give them a CKEditor or TinyMCE if they cannot handle HTML. I understand you have to solve this situation somehow (which simply should not exist). Any way you go, you need compromises. – kapa Mar 06 '12 at 11:13
I had already tried TinyMCE, when I insert a new table from TinyMCE toolbar Insert New table. In General tab, there is CellPadding, I set it to 5 but this CellingPadding not display correctly only display as 0 because of my reset.css. I think we need to set Padding values to each TD, but there is no Padding value for Table cell in TinyMCE UI. – zawmn83 Mar 08 '12 at 03:50
@zawmn83 How old version was that? Try CKEditor. There is no other way than an editor like this. The important part is that the editor should not use deprecated values like `cellpadding`. It should use only CSS for formatting, then it will override the reset CSS correctly. Also, include the reset CSS in CKEditor (there is an option), so everything will look the same. Look for other settings to only use CSS. Maybe ask a new question about it, if you are stuck. – kapa Mar 08 '12 at 09:30
I checked both CKEditor and TinyMCE latest version demo, they both store cellpadding instead of css for formatting. – zawmn83 Mar 09 '12 at 05:09

CSS Selector exception

1 Answers1