homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Ask: div:first-child span.cellData

 2:25 pm on May 5, 2003 (gmt 0)

Hi all,

I am a beginner at CSS.

I am reading following code and don't know what that is for:

div:first-child span.cellData {
font-family: verdana, arial, sans-serif;
font-size: 10pt;
border: 2px solid #ff0000;
margin: 5px 2px 2px 5px;
page-break-before: always;

can anyone give me a description for it?

Thanks very much



 3:49 pm on May 5, 2003 (gmt 0)

This is a class selector [w3.org] inside a decendant selector [w3.org] inside a psuedo-class selector [w3.org].

This rule is supposed to match any span element with the class of "cellData" that is contained in the first element that is a child element of a div. Example:

<p><span>This is [b]not[/b] matched.</span><span class="cellData">This [b]is[/b] matched, because of the className.</p>
<p><span>This is [b]not[/b] matched.</span><span class="cellData">This [b]isn't[/b] either, since it is not in the first child element of the div.</p>

<p><span class="cellData">This [b]is[/b] matched, because of the className and because it is in the first child element of the new div.</p>

The contents of the selected span should be rendered as 10pt Verdana (or Arial if Verdana is not available, or the system's default sans-serif font if neither of the previous two are available). It should have a 2px solid red border around it. It should also have a top margin of 5 px, a right margin of 2px, a bottom margin of 2px, and a left margin of 5px. Finally, when the page is printed it should always force a page break before the element in question.

This can all be gleaned from the links to the standard listed below.

font-family [w3.org]: verdana, arial, sans-serif;
font-size [w3.org]: 10pt;
border [w3.org]: 2px solid #ff0000;
margin [w3.org]: 5px 2px 2px 5px;
page-break-before [w3.org]: always;


 3:58 pm on May 5, 2003 (gmt 0)

See also the CSS2 Selectors list here:

[w3.org ]

(note that IE doesn't implement several of these, including anything using [] and '>')


 4:46 pm on May 5, 2003 (gmt 0)

moonbiter, drbrain, Thanks very much.

It seems that IE5.5 browser doesn't support this block since nothing happen when I test above code.


 5:15 pm on May 5, 2003 (gmt 0)

Neither does IE6, they don't support the :first-child psuedo-class :( (works ok in Mozilla)


 10:57 pm on May 5, 2003 (gmt 0)

If you ever have any doubt about what any CSS1, 2 or 3 selector does, then try using the SelectORacle [gallery.theopalgroup.com].

For this selector it says...

"Selects any span element with a class attribute that contains the word cellData that is a descendant of a div element that is a first child."

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved