Avoid css styles applying to child elements

Question

Is there any way that parent tag styles do not apply to child tag elements?

I have to display some data so I wish to align them in table for better view. I want to apply some styles to the table to make it look good. I am using some additional components (like plugins) in my table. So if I do apply any style to tr tag of my table, those are applied to those components tags too, if they have tr tag. This should not happen...

Is there any way that I can avoid inheritance?

 <style>
 /*The plug-in component may have table tr tags.So the following styles should be applied to plug-in..*/
     table tr{
     background:#434334;
     border-radius:5px;
    }

</style>

Jon · Accepted Answer · 2012-03-27 12:33:53Z

7

CSS are meant to be inherited like that. If you want to "not inherit" you have a few options:

Best: improve your selectors so that they only apply to the elements you need them to
Good: if existing markup does not allow you to do the above, help by giving the element(s) that need to be styled an additional attribute (e.g. extra class) that allows you to improve the selectors
Bad: write your selectors so that they apply globally, then write more selectors to "undo" the results on a case by case basis

In your case, it looks like a combination of the first two would work. You can give an id="foo" to your table and then change the selector to

table#foo > tbody > tr { /*...*/ }

The > is the child selector, which prevents the style from being applied to table rows further down the element tree.

answered Mar 27, 2012 at 12:33

Jon

439k85 gold badges756 silver badges820 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Barry Kaye · Accepted Answer · 2012-03-27 12:33:36Z

2

One solution would be to name your style table tr.style1{ ... and then in each of your <tr>'s you could just add a class attribute, i.e. <tr class="style1">.

answered Mar 27, 2012 at 12:33

Barry Kaye

7,7696 gold badges46 silver badges65 bronze badges

Collectives™ on Stack Overflow

Avoid css styles applying to child elements

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related