| Ask: div:first-child span.cellData
|
blue001
msg:1193206 | 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
|
moonbiter
msg:1193207 | 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:
<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
msg:1193208 | 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 '>')
|
blue001
msg:1193209 | 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.
|
drbrain
msg:1193210 | 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)
|
grahamstewart
msg:1193211 | 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."
|
|
|
