i've been reading "the zen of css design" by dave shea. there is a section on advanced selection methods. i'm wondering what the significance of using some of these selection methods are. are they mainly used in this case to deliver certain styles to MOSe browsers while also delivering other styles to IE? for instance, what is the difference between using the child selector:
#ContentContainer > p
{color: #FF0000;}
and using the typical:
#ContentContainer p
{color: #FF0000;} ????
Also, what is the difference between using the attribute selector:
[ID="ContentContainer"]
{color: #FF0000;}
and using the typical:
#ContentContainer
{color: #FF0000;} ????
i can see that these would be used to deliver certain attribute values to firefox for instance while using the typical methods for delivering different attribute values to IE so that styles render properly across browsers.. but from this book, it seems like the designers are just using these advanced selectors just because they can. can someone enlighten me?
thanks,
johnny#ContentContainer > p Is a child selector, and only applies to <p> elements that are directly contained by the element whose ID is ContentContainer.
#ContentContainer p Is a descendant selector, and applies to any <p> tag within the element whose ID is ContentContainer, regardless of whether the <p> is a "child", "grand-child", "great-grand-child", etc.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Page title</title>
<style type="text/css">
<!--
#myID p {
color: blue;
}
#myID > p {
color: red;
}
-->
</style>
</head>
<body>
<div ID="myID">
<p>I'm Red</p>
<div>
<p>I'm Blue</p>
</div>
<p>I'm Red</p>
</div>
</body>
</html>Functionally, there's no difference between [ID="ContentContainer"] and #ContentContainer, but the brackets could also be used for other attributes of the tag to be styled, such as [name="Some_Name"] or [href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.somewhere.com"].I should note that IE6 doesn't support the child or attribute selectors.
IE7 is expected to support them.
#ContentContainer > p
{color: #FF0000;}
and using the typical:
#ContentContainer p
{color: #FF0000;} ????
Also, what is the difference between using the attribute selector:
[ID="ContentContainer"]
{color: #FF0000;}
and using the typical:
#ContentContainer
{color: #FF0000;} ????
i can see that these would be used to deliver certain attribute values to firefox for instance while using the typical methods for delivering different attribute values to IE so that styles render properly across browsers.. but from this book, it seems like the designers are just using these advanced selectors just because they can. can someone enlighten me?
thanks,
johnny#ContentContainer > p Is a child selector, and only applies to <p> elements that are directly contained by the element whose ID is ContentContainer.
#ContentContainer p Is a descendant selector, and applies to any <p> tag within the element whose ID is ContentContainer, regardless of whether the <p> is a "child", "grand-child", "great-grand-child", etc.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Page title</title>
<style type="text/css">
<!--
#myID p {
color: blue;
}
#myID > p {
color: red;
}
-->
</style>
</head>
<body>
<div ID="myID">
<p>I'm Red</p>
<div>
<p>I'm Blue</p>
</div>
<p>I'm Red</p>
</div>
</body>
</html>Functionally, there's no difference between [ID="ContentContainer"] and #ContentContainer, but the brackets could also be used for other attributes of the tag to be styled, such as [name="Some_Name"] or [href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.somewhere.com"].I should note that IE6 doesn't support the child or attribute selectors.
IE7 is expected to support them.