Robert Neville wrote:
Can you add descendant ID selectors to an ID selector?
#container #header, #container #footer
Yes, but you may not always need to include the containing element in
your selector. Because id's are unique per page, you may not need the
added specificity a compound selector offers.
Would a better approach be the ID selector with the
class selector?
#container .header, #container .footer
That depends on whether or not you will need to reuse the styling for
more than one element on the page; if so, you'd want to use a class. If
you only have one element (per page) with the id "header" and one
element with the id "footer", then using and id is appropriate and
offers greater specificity when necessary. For this particular case I'd
use id's; #container #header {foo:foo;}
In my scenario, the header div is not a direct
descendant of the container div. My HTML uses a table
structure for lowest common denominator render
engines. The whole project is experimental.
I think you are confusing a child element with a descendant element. A
child element is an element that is connected to and *directly below*
another element in the document tree. For example:
<ul>
<li></li>
</ul>
Here, <li> is a child of <ul>.
A descendant element is any element connected to and *lower* in the
document tree than another element. For example:
<ul>
<li>
<p></p>
</li>
</ul>
Here, <p> is a descendant of <ul>.
snippet follows below. Let me know if you could
confirm various methods for declaring descendant
selectors.
<div id="container">
<table>
<tr>
<td>
<div id="header">
<p><!-- Content Here --></p>
</div>
</td>
</tr>
</table>
</div>
I am trying to avoid doing the following and get
beyond the basics.
#container table tr td div#header p, #container table
tr td div#footer p
If for some reason you need a level of specificity higher than a single
id offers, then you could certainly use your example. The choice isn't
really a matter of wrong or right; it's more a matter of practicality,
level of complexity, and best practice. Technically speaking #header
{foo:foo;} would cover your needs in most scenarios. Just keep in mind
that you do not have to name every element in the document tree for
every rule set an you should be fine.
--
Best regards,
Michael Wilson
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
