Welcome to WebmasterWorld Guest from 54.196.233.239

Forum Moderators: not2easy

Message Too Old, No Replies

Ask: div:first-child span.cellData

     

blue001

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

10+ Year Member



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

moonbiter

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

10+ Year Member



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:


<div>
<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>
</div>


<div>
<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>
</div>

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;

drbrain

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

WebmasterWorld Senior Member 10+ Year Member



See also the CSS2 Selectors list here:

[w3.org ]

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

blue001

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

10+ Year Member



moonbiter, drbrain, Thanks very much.

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

drbrain

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

WebmasterWorld Senior Member 10+ Year Member



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

grahamstewart

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

WebmasterWorld Senior Member 10+ Year Member



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."
 

Featured Threads

Hot Threads This Week

Hot Threads This Month