Geek Answers Handbook

CSS and overriding styles on nested elements

This raised another question that was asked here , but I consider it something that probably has a “best practice” approach.

When developing a website, the developer most likely collects a set of common styles for all elements of the website. (Standard fonts for text in Divs / Spans / H1 / H2s)

In the case of tables, they can also define default borders and alignments, for example ...

Table { border: dashed 1px #333333; padding: 2px; }

However, if you have a table inside the table (from the RSolberg example, AJAX calendar in the DataGrid), then both your parent and nested tables both inherit these styles. (Assume why they are called Cascading)

My question is that the best practice of applying styles to most elements that do not contain inherited elements also inherits them.

If you just provide an override that overrides any style you apply.

eg.

 Table { border: dashed 1px #333333; padding: 2px; } Table Table { border: solid 0px #000000; padding: 0px; }
+6
html css styles
source share
4 answers

If you have HTML:

 <html> ... <body> <div> <div> <div> <div> </body> </html>

You can only apply styles to a div that is a child of the body element using the selector ( > ) like this:

  body> div
 {
   border: solid 1px orange;
 }

A nested div will not get a border.

For more information, visit: http://www.w3.org/TR/CSS2/selector.html#child-selectors .

Please note that Internet Explorer 6 does not support the selector. .

+11
source share

Yes. The table table rule will override the table rule because it is more specific . What you described is the best way to have one style for the outermost table and another style for the inner tables - if none of the tables has a class or identifier that will allow you to use more semantic selectors.

In practice, you will most likely need to use this method with lists.

 ol { list-style: upper-roman } ol ol { list-style: upper-alpha } ol ol ol { list-style: lower-roman } ol ol ol ol { list-style: lower-alpha }
+3
source share

Add the class or identifier to the external table:

 <style type="text/css"> .outer {border: dashed 1px #333333;} </style> </head> <body> <table class="outer"> <tr><td>before inner table. <table> <tr> <td>Inside inner table.</td> </tr> </table> After inner table. </td> </tr> </table> </body>

Look here

If you cannot add id or classes in HTML and consider that the table you want to use the style is not in another table, you can style it by indicating which element is a child:

 div > table {border: dashed 1px #333333;}

Look here

Although this selector was only implemented in IE7, so if you need to support IE6 you will have to use the override method from the question.

+1
source share

I would agree with your initial idea on this subject, however, it depends on the circumstances.

Always create a basic rule and add exceptions with this rule to the stylesheet.

For example, if you are sure that the table inside the table will certainly never need the same style that applies to it, then use the "table table" selector to set the style. If, however, this can happen only once, then set the class in the parent table and change the "table table" selector to be something like a table.parent row.

However, the “parent” must be replaced with a descriptive name for the item, such as a calendar, because that is what it is. You should not name a class after a certain style, because if the style changes, it no longer makes sense.

0
source share

More articles:


All Articles