nostromo: nth-child Pseudo-Klasse - Wie Tabellenzellen selektieren?

Guten Tag,

derzeit beschaeftige ich mich mit CSS3 und bin dabei auf die sehr interessante Pseudo-Klasse "nth-child" gestossen. Ich verstehe allerdings noch nicht das Prinzip zum Selektieren bestimmter Zellen.

Ich habe deshalb ein kleines Beispiel zusammengeschrieben, um damit ein bisschen herumzuspielen: http://jsfiddle.net/EKnS2/

Es handelt sich um eine Tabelle mit insgesamt 12 Zellen (3 Spalten, 5 Zeilen). Die erste Zelle erstreckt sich durch rowspan=5 ueber die gesamte Hoehe der Tabelle.

Ich moechte ausschliesslich Zellen 2 bis 12 selektieren. Die erste Zelle soll also unberuehrt bleiben.

Geht das ueberhaupt?

Ich waere fuer jede Hilfe und Erklaerung sehr dankbar.

Herzliche Grueße

nostromo

  1. @@nostromo:

    nuqneH

    Geht das ueberhaupt?

    Ja, geht.

    Ich vermute dahinter aber eher ein HTML-Problem als ein CSS-Problem. Leider ist das anhand der Sinnlostexte in deinem Beispiel nicht ersichtlich. Sinnlostexte sind sinnlos.

    Was stehen wirklich für Inhalte in der Tabelle? Die sich über 5 Zeilen erstreckende Zelle in der 1. Spalte ist womöglich eine http://de.selfhtml.org/html/tabellen/aufbau.htm#definieren@title=Kopfzelle, also th? Dann wäre diese einfach zu stylen.

    Oder du könntest mit http://de.selfhtml.org/html/tabellen/aufbau.htm#vordefinieren@title=Spalten arbeiten.

    Es ist doch keine Layout-Tabelle, oder?

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Ich vermute dahinter aber eher ein HTML-Problem als ein CSS-Problem. Leider ist das anhand der Sinnlostexte in deinem Beispiel nicht ersichtlich. Sinnlostexte sind sinnlos.

      Was stehen wirklich für Inhalte in der Tabelle? Die sich über 5 Zeilen erstreckende Zelle in der 1. Spalte ist womöglich eine http://de.selfhtml.org/html/tabellen/aufbau.htm#definieren@title=Kopfzelle, also th? Dann wäre diese einfach zu stylen.

      Sinnlostexte sind in der Tat sinnlos. ;-) In meiner Tabelle sollen unter anderem Zahlen stehen, es handelt sich also nicht um eine Layout-Tabelle.

      Die erste Zelle soll die Summe aus den Zellen 3, 5, 7, 9, 11 enthalten. Die Tabelle wuerde also mit korrektem Inhalt so aussehen:

        
      <table class="testtabelle">  
      	<tr>  
      		<td rowspan="5">555</td>  
      		<td>Kategorie 1</td>  
      		<td>22</td>  
      	</tr>  
      	<tr>  
      		<td>Kategorie 2</td>  
      		<td>192</td>  
      	</tr>  
      	<tr>  
      		<td>Kategorie 3</td>  
      		<td>64</td>  
      	</tr>  
      	<tr>  
      		<td>Kategorie 4</td>  
      		<td>201</td>  
      	</tr>  
      	<tr>  
      		<td>Kategorie 5</td>  
      		<td>76</td>  
      	</tr>  
      </table>  
      
      

      Oder du könntest mit http://de.selfhtml.org/html/tabellen/aufbau.htm#vordefinieren@title=Spalten arbeiten.

      Deine vorgeschlagenen Loesungen hatte ich zwar vor Augen, aber ich wollte ja eigentlich die Moeglichkeiten von nth-child an so einer einfachen, grob definierten Tabelle testen. Die Frage ist also: Ist es ohne weitere HTML Deklarationen moeglich, alle td-Zellen ausgenommen der ersten zu selektieren?

      qathlo’

      und

      Qapla'!

      1. @@nostromo:

        nuqneH

        Die Frage ist also: Ist es ohne weitere HTML Deklarationen moeglich, alle td-Zellen ausgenommen der ersten zu selektieren?

        Ja, ist es. Sagte ich doch schon. ;-)

        Du willst in der ersten Zeile alle Zellen außer der ersten selektieren und in den anderen Zeilen alle Zellen.

        Mithilfe der Pseudoklasse :not() kannst du das in eine Selektorgruppe übersetzen?

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. @@Gunnar:

          nuqneH

          Du willst in der ersten Zeile alle Zellen außer der ersten selektieren und in den anderen Zeilen alle Zellen.

          Mithilfe der Pseudoklasse :not() kannst du das in eine Selektorgruppe übersetzen?

          Blöd nur, wenn man auch den IE 8 noch unterstützen will (und aktuell *will* man das noch) ...! :-P

          Davon ausgehend, dass die Tabellenstruktur so bestehen bleibt, wäre
          #testtabelle tr:first-child td:first-child
          eine Alternative, um nur die erste Tabellenzelle anzusprechen (die ID ist Absicht, denn die würde ich hier sehr wahrscheinlich einer Klasse vorziehen).

          Natürlich hat das den Nachteil, dass man für beide "Varianten" der Tabellenzellen entsprechende Style-Angaben notieren muss.

          Gruß Gunther

          1. Blöd nur, wenn man auch den IE 8 noch unterstützen will (und aktuell *will* man das noch) ...! :-P

            Das kommt fuer mich absolut auf das Projekt an. Private Seiten bekommen bei mir von IE8 abwaerts folgendes zu sehen:

            http://picload.org/image/odwlgig/meme.png

            Das mag vielleicht etwas zu sueffisant sein, aber mit meinen eigenen Projekten muss ich kein kommerzielles Ziel verfolgen und deshalb nicht zwangslaeufig jedem gerecht werden.

            Bzgl. der ID statt Klasse hast du absolut recht. Ich habe das entsprechend geaendert. Eine ID macht bei einer individuellen Tabelle wirklich mehr Sinn. :-)

            Beste Grueße

            nostromo

            1. Hallo,

              http://picload.org/image/odwlgig/meme.png

              "Ein Browser-Update ist schnell gemacht und kostet nichts."
              Das ist gelogen. Ein Browser-Update bedingt ein Downgrade[*] von XP auf Windows 7 oder Windows 8.

              Kostenlos ist höchstens der Wechsel zu einem anderen Browser, also weg vom IE.

              So long,
               Martin

              [*] Ja, ich empfinde das tatsächlich als Downgrade.

              --
              Ich denke, also bin ich hier falsch.
              Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
              1. [latex]Mae  govannen![/latex]

                http://picload.org/image/odwlgig/meme.png

                "Ein Browser-Update ist schnell gemacht und kostet nichts."
                Das ist gelogen. Ein Browser-Update bedingt ein Downgrade[*] von XP auf Windows 7 oder Windows 8.

                ...und ggf. komplett neue Hardware, um Windows 7/8 überhaupt installieren zu können, da die Hardware-Anforderungen höher sind.

                Win7/8 kaufen, neue Hardware kaufen ... ganz schön teuer für "kostet nichts"

                Stur lächeln und winken, Männer!

                Kai

                --
                Array(16).join("x" - 1) + " Batman!"
                I am Pentium of Borg. Division is futile. You will be approximated.
                Quiz: Flaggen, Länder und Hauptstädte
        2. Mithilfe der Pseudoklasse :not() kannst du das in eine Selektorgruppe übersetzen?

          Qapla'

          Ich habe mich soeben in :not() verliebt. Ernsthaft. Die Loesung gefaellt mir auch im Bezug auf die Tabelle ausgesprochen gut. Vielen dank, Gunnar!

          Jetzt noch alle Leute mit < IE9 ein Zwangsupdate verpassen und ich bin wunschlos gluecklich ;-)

          Nochmal ein herzliches Dankeschoen!

          Qapla'

          1. Hi,

            Jetzt noch alle Leute mit < IE9 ein Zwangsupdate verpassen und ich bin wunschlos gluecklich ;-)

            ein Zwangsupdate auf was? Auf einen richtigen Browser?

            Denn IE8 ist der letzte IE, der noch unter Windows XP läuft. Und wer jetzt noch XP benutzt, tut es entweder weil er muss (z.B. IT-Vorgaben am Arbeitsplatz) oder weil er -wie ich- die nachfolgenden Windows-Versionen für so abscheulich hält, dass er sich die nicht antun will.

            Meine Konsequenz daraus war, Windows "adieu" zu sagen - nur in diversen VMs habe ich zum Testen oder für Notfälle noch Windows, und auf einem echten PC ebenfalls noch ein Windows XP, falls man's mal braucht.

            Ciao,
             Martin

            --
            Heutzutage gilt ein Mann schon dann als Gentleman, wenn er wenigstens die Zigarette aus dem Mund nimmt, bevor er eine Frau küsst.
              (Barbra Streisand, US-Schauspielerin)
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
          2. Om nah hoo pez nyeetz, nostromo!

            Jetzt noch alle Leute mit < IE9 ein Zwangsupdate verpassen und ich bin wunschlos gluecklich ;-)

            Du widersprichst dir:

            "aber mit meinen eigenen Projekten muss ich kein kommerzielles Ziel verfolgen und deshalb nicht zwangslaeufig jedem gerecht werden."

            Und auch wenn da ein Smiley dahinter steht: Die Formulierung ist in meinen Augen äußerst unglücklich gewählt und das wiederum ist von mir äußerst euphemistisch formuliert.

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Halle und Halleffekt.

  2. Moin,

    Ich moechte ausschliesslich Zellen 2 bis 12 selektieren. Die erste Zelle soll also unberuehrt bleiben.

    Warum nicht umgekehrt? Das wäre in deinem Fall einfacher.

    Geht das ueberhaupt?

    Schon, wenn Gunnar das sagt ;) Aber ich würde dort einfach mit Attributselektoren arbeiten:

    table.testtabelle td { background: #FF0; }  
    table.testtabelle td[rowspan="5"] { background:#DDD; color:#FFF; }
    

    Grüße Marco

    --
    Ich spreche Spaghetticode - fließend.
    1. @@misterunknown:

      nuqneH

      Die erste Zelle soll also unberuehrt bleiben.

      Warum nicht umgekehrt?

      Weil man der ersten Zelle dann die Styles zuweisen müsste, die sie ohne Styling der anderen sowieso hätte. Dann hat man kein single point of change mehr; bei nachträglichen Änderungen wird die Zelle dann gern übersehen.

      table.testtabelle td[rowspan="5"] { background:#DDD; color:#FFF; }[/code]

      Überspezifiziert. 'table.testtabelle td[rowspan]' sollte als Selektor ausreichen. Dann kann sich die Anzahl der verbunden Zeilen auch mal ändern. (Setzt aber voraus, dass es nicht noch andere verbundene Zellen gibt.)

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)