working example: http://www.thexvector.us/css2childss.php
Code: Select all
<?php echo("<?xml version="1.0" encoding="iso-8859-1"?>\n"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
<title>The ´X´ Vector :: CSS 2 Child Selector Example ::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
body {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
margin: 0px;
padding: 0px;
color: rgb(51,51,51);
background: rgb(255,255,255);
}
div {
padding: 10px;
border: 1px rgb(255,255,255) solid;
text-align: justify;
}
/* Block 1 */
#short1 {
position: relative;
top: 10px;
left: 10px;
width: 400px;
height: 150px;
z-index: 1;
background: url( http://www.thexvector.us/images/mousehand.gif ) no-repeat 95% 94%;
}
div:hover#short1>div:first-child {
display: block;
}
div:hover#short1 {
color: rgb(0,0,51);
background: rgb(255,255,255);
border: 1px rgb(204,204,204) solid;
background: none;
}
/* Block 2 */
#short2 {
position: relative;
top: 100px;
left: 10px;
width: 400px;
height: 150px;
z-index: 1;
background: url( http://www.thexvector.us/images/mousehand.gif ) no-repeat 95% 94%;
}
div:hover#short2>div:first-child {
display: block;
}
div:hover#short2 {
color: rgb(51,0,0);
background: rgb(255,255,255);
border: 1px rgb(204,204,204) solid;
background: none;
}
/* Block 3 */
#short3 {
position: relative;
top: 200px;
left: 10px;
width: 400px;
height: 150px;
z-index: 1;
background: url( http://www.thexvector.us/images/mousehand.gif ) no-repeat 95% 94%;
}
div:hover#short3>div:first-child {
display: block;
}
div:hover#short3 {
color: rgb(0,51,0);
background: rgb(255,255,255);
border: 1px rgb(204,204,204) solid;
background: none;
}
/* Block Common */
.a {
position: relative;
top: 0px;
left: 300px;
border:none;
display: none;
z-index: 2;
}
/* Psuedo */
a {
text-decoration: none;
}
/* Red */
a.r:link {
color: rgb(102,0,0);
background: transparent;
}
a.r:visited {
color: rgb(102,0,0);
background: transparent;
}
a.r:hover {
color: rgb(255,0,0);
background: transparent;
}
/* Green */
a.g:link {
color: rgb(0,102,0);
background: transparent;
}
a.g:visited {
color: rgb(0,102,0);
background: transparent;
}
a.g:hover {
color: rgb(0,153,51);
background: transparent;
}
/* Blue */
a.b:link {
color: rgb(0,0,102);
background: transparent;
}
a.b:visited {
color: rgb(0,0,102);
background: transparent;
}
a.b:hover {
color: rgb(0,0,255);
background: transparent;
}
</style>
</head>
<body onload="window.defaultStatus='The ´X´ Vector :: CSS 2 Child Selector Example ::'">
<div id="short1" title="Article Summary">
Graphical user interfaces may use outlines around elements to tell the user which element on the page has the focus.
These outlines are in addition to any borders, and switching outlines on and off should not cause the document to reflow.
The focus is the subject of user interaction in a document (e.g., for entering text, selecting a button, etc.).
User agents supporting the interactive media group must keep track of where the focus lies and must also represent the focus.
This may be done by using dynamic outlines in conjunction with the :focus pseudo-class.
<div class="a"><a href="/" class="b" title="Complete Story">Complete Story</a></div>
</div>
<div id="short2" title="Article Summary">
Graphical user interfaces may use outlines around elements to tell the user which element on the page has the focus.
These outlines are in addition to any borders, and switching outlines on and off should not cause the document to reflow.
The focus is the subject of user interaction in a document (e.g., for entering text, selecting a button, etc.).
User agents supporting the interactive media group must keep track of where the focus lies and must also represent the focus.
This may be done by using dynamic outlines in conjunction with the :focus pseudo-class.
<div class="a"><a href="/" class="r" title="Complete Story">Complete Story</a></div>
</div>
<div id="short3" title="Article Summary">
Graphical user interfaces may use outlines around elements to tell the user which element on the page has the focus.
These outlines are in addition to any borders, and switching outlines on and off should not cause the document to reflow.
The focus is the subject of user interaction in a document (e.g., for entering text, selecting a button, etc.).
User agents supporting the interactive media group must keep track of where the focus lies and must also represent the focus.
This may be done by using dynamic outlines in conjunction with the :focus pseudo-class.
<div class="a"><a href="/" class="g" title="Complete Story">Complete Story</a></div>
</div>
</body>
</html>