CSS 2 Child Selector

Small, short code snippets that other people may find useful. Do you have a good regex that you would like to share? Share it! Even better, the code can be commented on, and improved.

Moderator: General Moderators

Post Reply
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

CSS 2 Child Selector

Post by no_memories »

After messing around with CSS 2 child selectors, this came about. Unfortunately, it only works in Mozilla 0.9.4 and higher and Opera 7 and higher.

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 &#123;
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);
&#125;

div &#123;
padding: 10px;
border: 1px rgb(255,255,255) solid;
text-align: justify;
&#125;

/* Block 1 */

#short1 &#123;
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%;
&#125;

div:hover#short1>div:first-child &#123;
display: block;
&#125;

div:hover#short1 &#123;
color: rgb(0,0,51);
background: rgb(255,255,255);
border: 1px rgb(204,204,204) solid;
background: none;
&#125;

/* Block 2 */

#short2 &#123;
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%;
&#125;

div:hover#short2>div:first-child &#123;
display: block;
&#125;

div:hover#short2 &#123;
color: rgb(51,0,0);
background: rgb(255,255,255);
border: 1px rgb(204,204,204) solid;
background: none;
&#125;

/* Block 3 */

#short3 &#123;
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%;
&#125;

div:hover#short3>div:first-child &#123;
display: block;
&#125;

div:hover#short3 &#123;
color: rgb(0,51,0);
background: rgb(255,255,255);
border: 1px rgb(204,204,204) solid;
background: none;
&#125;

/* Block Common */

.a &#123;
position: relative;
top: 0px;
left: 300px;
border:none;
display: none;
z-index: 2;
&#125;

/* Psuedo */

a &#123;
text-decoration: none;
&#125;

/* Red */
a.r:link &#123;
color: rgb(102,0,0);
background: transparent;
&#125;

a.r:visited &#123;
color: rgb(102,0,0);
background: transparent;
&#125;

a.r:hover &#123;
color: rgb(255,0,0);
background: transparent;
&#125;

/* Green */
a.g:link &#123;
color: rgb(0,102,0);
background: transparent;
&#125;

a.g:visited &#123;
color: rgb(0,102,0);
background: transparent;
&#125;

a.g:hover &#123;
color: rgb(0,153,51);
background: transparent;
&#125;

/* Blue */
a.b:link &#123;
color: rgb(0,0,102);
background: transparent;
&#125;

a.b:visited &#123;
color: rgb(0,0,102);
background: transparent;
&#125;

a.b:hover &#123;
color: rgb(0,0,255);
background: transparent;
&#125;

</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>
?>
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

very nice!
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post by no_memories »

Hey,

I checked out your website; one word - sweet.

Thanks for the compliment.
Last edited by no_memories on Tue Feb 24, 2004 3:41 pm, edited 1 time in total.
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post by no_memories »

nigma,

Could I ask you a question in regards to PhP? I'm rather new to PhP but I grasp its fundamentals.

I noticed a feature of you website that I would like to inquire about? It's a bit different, but it's the same general principle.

I could really use some good help on this one.

again, awesome website.
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

Absolutely! You can email me or PM me, either works.

Mail: nigma A T nigmanet D O T net
Post Reply