StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCSS styles "leaking" to non-intended elements, why does it happen and how to prevent it?
text
Body
copied!<p>According to the W3Schools CSS notes, if you use an ID on an element, then the CSS styles defined for that ID (using #id_name) should only apply to that element, and this is how you should style an element which only appears once.</p> <p>I've a site which includes a display table (of actual tabular data, it's a grid of phone numbers in different classifications). So I've placed the table inside a div and set the div to have an ID. I then defined styles for the ID in the stylesheep.</p> <p>HTML:</p> <pre><code><div id='phone_number_grid'> <table> ... </table> </div> </code></pre> <p>CSS:</p> <pre><code>#phone_number_grid table { border-collapse: collapse; } #phone_number_grid th,td { border: 1px solid #000040; background-color: #ccccff; padding: 5px; } </code></pre> <p>The style works perfectly on the table it's intended for, but it is also affecting a completely different table which has no class or id settings, and is contained in a completely unrelated div with it's own (completely unrelated) class settings, on a different page that uses the same stylesheep.</p> <p>How do I stop the #phone_number_grid styles from affecting unrelated tables?</p> <p>Note I previously tried the same thing using a class ID on the div, with the same results - the styles "leaked" onto other tables that didn't mention them.</p> <p>Q1: Why are these styles applying themselves to elements that don't reference them?</p> <p>Q2: Is there a CSS way of saying "do not apply any styles at all to this specific element"?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload