Ask: div:first-child span.cellData

[blue001]

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]

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]

See also the CSS2 Selectors list here:

[w3.org ]

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

[blue001]

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]

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

[grahamstewart]

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