Selektoren / immer nur erstes <td> selektieren

[Christian]

Hallo,

ich möchte innerhalb einer Tabelle mit CSS immer nur das erste <td> selektieren.

also die erste Spalte soll bestimmte CSS eigenschaften bekommen.

etwa so:

<table class="Extra">
<tr>
<td>Rot</td>
<td>Normal</td>
</tr>
</table>

----------

.Extra tr /* hier Selektor für erste Spalte */
{
background-color: red;
}

Was auch wichtig wäre:

welche Browser unterstützen diese Art von Selektoren!? Gehen tut das doch bestimmt.
Es soll einfach nur dazu dienen, nicht jedes mal eine extra Klasse für jedes <td> zu schreiben, weil alle <td>s der ersten Spalte ohnehin dieselbe Klasse bekommen.

Gruß
Christian

[D.R.]

Hallo,

ich möchte innerhalb einer Tabelle mit CSS immer nur das erste <td> selektieren.

also die erste Spalte soll bestimmte CSS eigenschaften bekommen.

Entweder

.Extra tr td:first-child {color:red;}

oder

.Extra tr td {color:red;}  
.Extra tr td + td {color:blue;}  

welche Browser unterstützen diese Art von Selektoren!?

AFAIK alle, außer IE 6.

mfg. Daniel

[Christian]

Hi,

ja da hast du recht!!

Aber wie wäre es, wenn ich nur die 2./3./4./... Spalte selektieren möchte? Geht sowas auch?

also so was wie:

.Extra tr td:second-child
.Extra tr td:third-child
.Extra tr td:fourth-child

Gruß!

Hallo,

ich möchte innerhalb einer Tabelle mit CSS immer nur das erste <td> selektieren.

also die erste Spalte soll bestimmte CSS eigenschaften bekommen.

Entweder

.Extra tr td:first-child {color:red;}

oder

.Extra tr td {color:red;}

.Extra tr td + td {color:blue;}

>   
> > welche Browser unterstützen diese Art von Selektoren!?  
>   
> AFAIK alle, außer IE 6.  
>   
> mfg. Daniel

[Chris]

Hi,

ja da hast du recht!!

Aber wie wäre es, wenn ich nur die 2./3./4./... Spalte selektieren möchte? Geht sowas auch?

also so was wie:

.Extra tr td:second-child
.Extra tr td:third-child
.Extra tr td:fourth-child

Gruß!

jup, z.b. so:

td { background-color:#99e; }
td + td { background-color:#ee9; }
td + td + td { background-color:red; }
td + td + td + td { background-color:green; }

Selbstverständlich funktioniert auch das im IE6 nicht! (wie gewohnt)

[D.R.]

Hallo,

Aber wie wäre es, wenn ich nur die 2./3./4./... Spalte selektieren möchte? Geht sowas auch?

Ja.

also so was wie:

.Extra tr td:second-child
.Extra tr td:third-child
.Extra tr td:fourth-child

Nein. CSS3 wird eine Pseudoklasse namens „nth-child“ enthalten, die den selben Nutzen hat.

Mit derzeitigem CSS könntest du aber folgendes machen:

  
td {color:blue;}  
td+td+td+td {color:red;}  
td+td+td+td+td {color:blue;}  

Damit könntest du z.B. die 4. Spalte anders formatieren (in diesem Fall mit roter Textfarbe).

mfg. Daniel

[Christian]

Ok, habe das Problem schon selbst gelöst.

td:first-child

geht in IE 6 nicht. In IE 7 schon.

danke!

[Gernot Back]

Hallo Christian,

td:first-child

geht in IE 6 nicht. In IE 7 schon.

Schon im IE 6 kannst du aber COL-Elemente stylen. Die in den Spalten befindlichen TD- bzw. TH-Elemente nehmen so zugewiesene Styles dann aber nur insoweit an, als du sie nicht schon bereits über TH- bzw. TD-Elementselektoren zuweist, da letztere eine höhere Spezifität haben.

Gruß Gernot