CODEWITHSUNDEEP
htmlcsscss-selectors
el Dude
el Dude

Reputation: 5183

CSS selector style exclusion for some selectors

I have 

<table id="exclude1"><tr><td id="exclude2" height="100%" width="100%">

    <div>123</div><table>......</table> etc

</td></tr></table>

and CSS style

<style>
#exclude1, #exclude2 {border:0; background:transparent; width:100%; height:100%; margin:auto; padding:0; float:none; position:relative;}
* {border:1px solid red; background:red; width:100px; etc.....}
</style>

The problem is, when I set 'display:block' or 'display:inline' for '*' selector is css, then this style also applies to excluded selectors. When I set 'display:block' or 'table', or 'table-cell' or whatever for the 'exclude' selectors, these two elements become different (alignment, size etc are ruined).

What can I do, to make #exclude1 and #exclude2 untouched by '*' selector styles?


UPD:

I've separated #exclude1, #exclude2 as:

#exclude1 {border:0; background:transparent; width:100%; height:100%; margin:auto; padding:0; float:none; position:relative; display:table;}
#exclude2 {border:0; background:transparent; width:100%; height:100%; margin:auto; padding:0; float:none; position:relative; display:table-cell; vertical-align:middle;}

and seems like all works fine at least for now. Thanx.

Upvotes: 0

Views: 225

Answers (1)

thaevok
thaevok

Reputation: 166

Put * before #Exclude1, #Exclude2. Thats how CSS works, they're Cascading Style Sheets.

And, if all else fails, throw a !important after your property like this:

  • border: none !important;

Upvotes: 1

Related Questions