Psuedo Classes and Child Selectors
I have a friend with whom I attended several courses at Interface Technical Training and he recently inquired about pseudo-class and child selectors. He is amazing at XSLT and although I haven't been through a course with him in several years I suspect he's amazing at C# by now as well. In any case he is so good at XSLT that his version of a tshirt with a moniker Keeping It Real would more likely say: Keeping It CDATA!
His question was regarding the correct format for directing styles to links nested in specific tables with a class of mytable.
To be honest I always have to check on where to put the period, is it mytable.a, or a.mytable etc.. in any case I went ahead and put together a page to point out one way of doing it which works well for me. I have commented the code as well and included a couple of screen shots of the rendered page to illustrate the true power of pseudo classes and child elements.
Figure 1 - illustrates the differences in the link properties.
Figure 2 - illustrates the difference in the hover properties.
Here's The Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Psuedo Classes Example Page</title>
<style type="text/css">
/*set the margin and padding for all elements to 0 (for firefox and others)*/
*
{margin:0px;
padding:0px;}
/*standard stuff*/
body
{background-color:#ADAE8C;
color:#2E291A;
font-family:arial;
font-size:large;
margin:0px;
padding:0px;}
/*set the styles for the wrapper div, set the margins to 0px auto 0px auto so that the content
is centered*/
#wrapper
{width:800px;
margin:0px auto 0px auto;
}
/*set the properties for the header div, add some letter spacing for spice*/
#header
{
height:70px;
background-color:#2A2A2A;
color:#F1FFF9;
letter-spacing:3px;
text-align:center;}
/*push the h1 off the top a little bit*/
#header h1
{padding-top:10px;}
/*set the properties on the content div which will wrap around an inner content div*/
#content
{width:800px;
min-height:700px;
background-color:#EAEAD4;
color:#3D3D32;}
/*set the padding on the inner content div to avoid box model hacks but push my stuff away*/
#innercontent
{padding:20px;}
/*set the psuedo class properties for the links on the page, of course they go in order:
link, visited, hover, active (loveha) so they don't override eachother*/
a:link
{color:#A35407}
a:visited
{color:#A35407}
a:hover
{color:#523419;
background-color:#D4D0C8;}
a:active
{color:#A35407}
/*set specific psuedo class properties for links which are nested in a td which is nested in a tr
which is nested in a table with a class of mytable. Simple, elegant, powerful*/
table.mytable tr td a:link
{color:#523419;}
table.mytable tr td a:visited
{color:#523419;}
table.mytable tr td a:hover
{color:#A3945D;
background-color:#2A2A2A;}
table.mytable tr td a:active
{color:#523419;}
/*set some basic properties in on tables in this page so that it's more visually appealing*/
table
{border:2px solid black;
padding:4px;}
td
{border:1px solid black;
padding:4px;}
</style>
<!-- the old html if statement, our freind!-->
<!--[if IE 5]>
<style>
#content
{
height:700px;
}
</style>
<![endif]-->
<!--[if IE 6]>
<style>
#content
{
height:700px;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>
Pseudo Class Child Selectors</h1>
</div><!-- end header div -->
<div id="content">
<div id="innercontent">
<a href="http://www.interfacett.com" target="_blank">Interface Technical Training</a><br />
<a href="http://www.interfacett.com" target="_blank">Interface Technical Training</a><br />
<a href="http://www.interfacett.com" target="_blank">Interface Technical Training</a><br />
<a href="http://www.interfacett.com" target="_blank">Interface Technical Training</a><br />
<br />
<table class="mytable">
<tr>
<td>
<a href="http://blogs.interfacett.com" target="_blank">The Blogs</a></td>
</tr>
<tr>
<td>
<a href="http://blogs.interfacett.com" target="_blank">The Blogs</a></td>
</tr>
<tr>
<td>
<a href="http://blogs.interfacett.com" target="_blank">The Blogs</a></td>
</tr>
<tr>
<td>
<a href="http://blogs.interfacett.com" target="_blank">The Blogs</a></td>
</tr>
</table>
<br />
<hr />
<h1 class="mytable">
<a href="http://www.interfacett.com" target="_blank">An H1 + A With A Class Of mytable</a></h1>
</div><!-- end inner content div -->
</div><!-- end content div -->
</div><!-- end wrapper div -->
</body>
</html>
Colorized by: CarlosAg.CodeColorizer
Click Here to go to the W3C spec on selectors.
Spike Xavier
1 Comment
View Printer Friendly Version
Email Article to Friend
Reader Comments (1)