Matze: Nachbar-Selektor für "vorher"

Hallo!

Es gibt ja den Nachbar-Selektor + mit dem man ein Element direkt nach einem anderen ansprechen kann.

z.B. alle Absätze nach Überschriften fett machen

h3 + p {  
   font-weight:bold;  
}

Gibt es dazu auch das Gegenstück, also - ?

z.B. allen Überschriften vor einer bestimmten Klasse eine andere Schriftgröße geben

.bold - h3 {  
    font-size:1.5em;  
}

In meinem konkreten Fall geht es darum, dass ich 2 nebeneinander liegende Tabellenspalten(-zellen) beim hover highlighten will um sie optisch besser als zusammengehörig darzustellen.

Wenn ich mit der Maus über die erste Spalte fahre, kann ich die zweite schön mit dem + ansprechen. Ich würd aber auch gern die erste Spalte highlighten wenn ich über der zweiten bin.

Ist das nur mit CSS möglich?

Danke und Grüße, Matze

  1. Hallo,

    Gibt es dazu auch das Gegenstück, also - ?

    Nein, gibt es nicht.

    Ist das nur mit CSS möglich?

    tr:hover ?

    Gruß

    1. Hi,

      Nein, gibt es nicht.

      Was für eine halbherzige Sache :(

      »» Ist das nur mit CSS möglich?
      tr:hover ?

      Nee leider nicht, ich bräuchte nur 2 der 4 Spalten und will nicht extra 2 Tabellen anlegen.

      Danke und Grüße, Matze

      1. Hallo!

        Wie wärs mit tr:hover td und tr:hover td+td?

        MfG
        tomgk

        --
        Selfcode=ie:% fl:( br:> va:| ls:& rl:? n4:? ss:| de:] js:| ch:? sh:) mo:) zu:(
        1. Heyho!

          Wie wärs mit tr:hover td und tr:hover td+td?

          Schade, aber nein.
          Wie gesagt, hätte ich gern die erste und die zweite Zelle angesprochen egal ob ich über der ersten oder zweiten bin.
          Die Tabelle besteht aus 4 Spalten. Mit den ersten beiden würde dein Vorschlag klappen, aber ich hätte den gleichen Effekt auch gern mit Zelle/Spalte 3 und 4.

          Da es aber nur der optischen Verbesserung dient, geb ich mich auch zufrieden wenn es ebend nicht klappt. Zur Bedienung muss man eh über Spalte 1 oder 3 fahren und daher kann ich es verschmerzen.

          Danke und Grüße, Matze

          1. Moin!

            Schade, aber nein.
            Wie gesagt, hätte ich gern die erste und die zweite Zelle angesprochen egal ob ich über der ersten oder zweiten bin.
            Die Tabelle besteht aus 4 Spalten. Mit den ersten beiden würde dein Vorschlag klappen, aber ich hätte den gleichen Effekt auch gern mit Zelle/Spalte 3 und 4.

            Dumm, dass du Spalten hast. Die lassen sich nun wirklich nicht einheitlich zusammenfassen, um einen vernünftigen Selektor zu erfinden.

            Für Zeilen hätte ich mir überlegt, einfach zusammengehörige mit <tbody> zusammenzufassen und dann gemeinsam zu formatieren: table.whatever tbody:hover td {} Könnte mir vorstellen, dass das klappt. Aber Spalten sind so definitiv nicht greifbar, da müsste dann schon Javascript zum Einsatz kommen.

            Da es aber nur der optischen Verbesserung dient, geb ich mich auch zufrieden wenn es ebend nicht klappt. Zur Bedienung muss man eh über Spalte 1 oder 3 fahren und daher kann ich es verschmerzen.

            Das ist schon eine wichtige Einschränkung. Optisches Feedback sollte man nur dort geben, wo tatsächlich etwas passieren kann. Insofern also kein Drama, dass es nicht geht.

            - Sven Rautenberg

          2. Hallo,

            Wie gesagt, hätte ich gern die erste und die zweite Zelle angesprochen egal ob ich über der ersten oder zweiten bin. Die Tabelle besteht aus 4 Spalten. Mit den ersten beiden würde dein Vorschlag klappen, aber ich hätte den gleichen Effekt auch gern mit Zelle/Spalte 3 und 4.

            Du klassifizierst also die Zellen 1 und 2 unterschiedlich zu den Zellen 3 und 4, ja?

            Tim

            1. Hallo,

              Du klassifizierst also die Zellen 1 und 2 unterschiedlich zu den Zellen 3 und 4, ja?

              Nein.

                
              .foo:hover, .foo:hover + td {  
                  background-color:white;  
              }  
              
              
                
              <tr>  
                  <td class="foo"></td>  
                  <td></td>  
                  <td class="foo"></td>  
                  <td></td>  
              </tr>
              

              Grüße, Matze

      2. Was für eine halbherzige Sache :(

        Du kannst es ja für die CSS-Level-4-Selektoren-Spezifikation vorschlagen :)

        Nee leider nicht, ich bräuchte nur 2 der 4 Spalten und will nicht extra 2 Tabellen anlegen.

        tr:hover .class
        oder: tr:hover td:nth-child(1), tr:hover td:nth-child(2), ...

        Letzteres, ist allerdings noch nciht weit genug implementiert.

        Gruß

      3. Hi,

        Was für eine halbherzige Sache :(

        die W3C-Spezifikation sieht auch vor, dass eine performante Umsetzung möglich ist.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. Hey Cheatah,

          die W3C-Spezifikation sieht auch vor, dass eine performante Umsetzung möglich ist.

          Wie darf ich das verstehen?

          Grüße, Matze

          1. Tach,

            die W3C-Spezifikation sieht auch vor, dass eine performante Umsetzung möglich ist.

            Wie darf ich das verstehen?

            ein Vorher-Selektor hätte vermutlich das selbe Problem wie ein Vorfahren-Selektor.

            mfg
            Woodfighter

            1. Hallo,

              ein Vorher-Selektor hätte vermutlich das selbe Problem wie ein Vorfahren-Selektor.

              Ja gut, aber wie das zum Schluss implementiert wird ist mir eigentlich egal ;)
              Schön wär es trotzdem und da es ja ein oft daherkommender Wunsch zu sein scheint müsste man vielleicht wirklich (irgendwann) mal das Konzept umkrempeln um sowas zu ermöglichen. XPath halte ich für keine Alternative.

              Aber danke, das Thema war mir neu.

              Grüße, Matze