RickRoyce: Alternierende Listenelemente in einer CSS Klasse?

Hallo,

ich möchte eine Tabelle/Liste alternierend mit unterschiedlichen CSS Eigenschaften (Bsp: background) erstellen. Der Inhalt wird dynamisch erzeugt und man weiss nicht, an welcher Stelle, welches Element auftaucht.

Gibt es eine Möglichkeit der Tabellenzeile EINE Klasse zu geben und CSS sich automatisch um die Färbung kümmert (je nachdem ob es ein grades oder ungrades Element ist)?

Eine Lösung mit zwei Classen habe ich bereits, aber die ist sehr datenbankabfrage-intensiv, weil jede Zeile auch Infos über alle vorherig angezeigten Zeilen holen muss.

Viele Grüße

  1. Hi,

    Gibt es eine Möglichkeit der Tabellenzeile EINE Klasse zu geben und CSS sich automatisch um die Färbung kümmert (je nachdem ob es ein grades oder ungrades Element ist)?

    http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

    Eine Lösung mit zwei Classen habe ich bereits, aber die ist sehr datenbankabfrage-intensiv, weil jede Zeile auch Infos über alle vorherig angezeigten Zeilen holen muss.

    Wieso das denn?
    Du gibst abwechselnd als Inhalt des class-Attributes "odd" oder "even" aus, und fertig. Was soll das in irgendeiner nur erdenklichen Hinsicht mit der Datenbank zu tun haben?

    MfG ChrisB

    --
    Light travels faster than sound - that's why most people appear bright until you hear them speak.
    1. Wieso das denn?
      Du gibst abwechselnd als Inhalt des class-Attributes "odd" oder "even" aus, und fertig. Was soll das in irgendeiner nur erdenklichen Hinsicht mit der Datenbank zu tun haben?

      ich wollte nicht soweit ausholen. Die Inhalte kommen aus einem CMS und die Elemente von denen ich sprach sind in sich abgeschlossene Plugins, welche nichts voneinander wissen. Ob der Inhalt angezeigt wird, entscheidet das Plugin waehrend der Laufzeit, indem es prüft, ob ein USER eingeloggt ist und welcher Gruppe der User angehört.

      Die EVEN/ODD Variante benutze ich grade, aber es wäre wesentlich performanter, wenn es mit einer Pseudoklasse geht.

      Viele Grüße

      1. Die EVEN/ODD Variante benutze ich grade, aber es wäre wesentlich performanter, wenn es mit einer Pseudoklasse geht.

        Es geht auch mit einer Pseudoklasse - allerdings nur in Browser die diese auch unterstützen - da es sich eben um eine CSS-3-Eigenschaft handelt.

        Die even/odd-Geschichte ist nunmal Best Practice.

        Alternativ kannst du das auch clientseitig mit JavaScript machen (wenn du am Server Performance sparen willst[1])- jQuery stellt z.B. :nth-child() als Selektor zur Verfügung.

        [1] Wobei ein "if zähler modulo 2 === 2" jetzt auch nicht wirklich enorm viel frisst :)

        1. Alternativ kannst du das auch clientseitig mit JavaScript machen

          ja, gut. das waere eine variante, die "childs" alle zu zaehlen und dann durchlaufen und fuer jedes eine css klasse even/odd zuzuweisen. dann koennte ich diese datenbankabfragen sparen...

          danke, so werde ich es erstmal machen.

          Grüße, Rick

          1. ja, gut. das waere eine variante, die "childs" alle zu zaehlen und dann durchlaufen und fuer jedes eine css klasse even/odd zuzuweisen.

            Wie gesagt, diverse JavaScript-Frameworks liefern bereits fertige Selektoren - da musst du nichts erfinden

            dann koennte ich diese datenbankabfragen sparen...

            Wie schon erwähnt bezweifle ich, dass JavaScript schneller ist als ein kleine Prozedur beim Ausgeben der Daten.

        2. Hallo suit,

          kleiner Tippfehler:

          [1] Wobei ein "if zähler modulo 2 === 2"

          besser wäre ein Vergleich mit 0 :-)

          Freundliche Grüße

          Vinzenz

          1. Hallo suit,

            kleiner Tippfehler:

            [1] Wobei ein "if zähler modulo 2 === 2"

            besser wäre ein Vergleich mit 0 :-)

            oder mit 1/2 :)

            Danke für die Korrektur.

      2. Hi,

        Die Inhalte kommen aus einem CMS und die Elemente von denen ich sprach sind in sich abgeschlossene Plugins, welche nichts voneinander wissen.

        Problem ist also, dass das Alternieren über die Datensätze mehrerer Plugins hinweg konsistent geschehen soll?

        Na dann müsste man denen nur den finalen Zustand der jeweils vorhergehenden Ausgabe bekannt machen, damit sie da wieder ansetzen können.

        MfG ChrisB

        --
        Light travels faster than sound - that's why most people appear bright until you hear them speak.
    2. Hi,

      Gibt es eine Möglichkeit der Tabellenzeile EINE Klasse zu geben und CSS sich automatisch um die Färbung kümmert (je nachdem ob es ein grades oder ungrades Element ist)?

      http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

      Unterstützt von Firefox, Opera, Safari, Konqueror.

      Nicht unterstützt von (dreimal dürft Ihr raten): Spaßbremse Internet Explorer

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      O o ostern ...
      Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
      1. Yerf!

        Nicht unterstützt von (dreimal dürft Ihr raten): Spaßbremse Internet Explorer

        Hm... ist halt CSS3, noch nicht final und so...

        Persönlich find ichs gut, dass das IE Team erst mal CSS2.1 unterstützen wollte, damit das Kapitel mal abgeschlossen ist. Insgesamt find ich die Leistung des (neuen) IE-Teams gut... dass zwischen IE6 und IE7 Stillstand war ist nicht deren Schuld.

        Was mir am IE8 noch fehlt ist SVG und XHTML+XML...

        Gruß,

        Harlequin

        --
        <!--[if lt IE 8]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
      2. @@MudGuard:

        nuqneH

        Nicht unterstützt von (dreimal dürft Ihr raten): Spaßbremse Internet Explorer

        Im IE sollte man das mit CSS-Expression auch recht einfach hinbekommen.

        Qapla'

        --
        Bildung lässt sich nicht downloaden. (Günther Jauch)