Inhaltsbezogenes CSS – Stil nur anwenden, wenn Inhalt verfügbar ist

Lesezeit: 2 Minuten

Ist es möglich, dass ein CSS-Stil erkennt, ob das Element, auf das er angewendet wird, eine Art Inhalt hat oder nicht? Ich verwende derzeit Tabellen (dazu gezwungen, da der Endbenutzer CMS zum Erstellen von Seiten verwendet) mit einem CSS für jede Zelle

<table>
<tr>
    <td class="someClass">Test value 1</td>
    <td class="someClass">Test value 2</td>
</tr>
<tr>
    <td class="someClass">Test value 3</td>
    <td class="someClass"></td>
</tr>
</table>

Wie angezeigt, besteht die Möglichkeit, dass eine Tabellenzelle leer gelassen wird. Gibt es eine Möglichkeit, “someClass” darauf aufmerksam zu machen und den Stil nicht auf diese Zelle anzuwenden?

Ich bin mir sicher, dass es einen js-Hack gibt, den ich anwenden könnte, aber ich frage mich, ob es mit reinem CSS möglich ist. Langer Schuss?

Vielen Dank.

  • Welche Art von Stil möchten Sie? Du hast empty-cells:hide; wodurch die Grenzen einer Zelle ausgeblendet werden.

    – Mein Kopf tut weh

    30. Januar 2012 um 12:01 Uhr

  • Danke Leute. :not(:empty) funktioniert bei mir!

    – mspir

    1. Februar 2012 um 9:26 Uhr

Benutzer-Avatar
BoltClock

Nutzen Sie einfach die :empty Pseudo-Klasse wie folgt:

td.someClass:not(:empty) {
    /* Styles */
}

Wie Petr Marek erwähnt, ist es als Cross-Browser-Lösung nicht sehr zuverlässig, also wenn Sie muss unterstützen Sie ältere Browser (IE8 und älter). Wille benötigen JS (was Sie wahrscheinlich selbst herausfinden können). Andernfalls funktioniert die obige CSS-Regel einwandfrei.

Die Browserkompatibilität finden Sie unter :not() und :empty hier

Das einzige, was mir einfällt, das sich auf Ihre Frage bezieht, sind Pseudo-Klassen, wie z. B. leer. Hier ist ein Beispiel:

<html>
  <head>
    <title>Example</title>
    <style type="text/css">
      .cell:not(:empty) {
        background-color: red;    
      }
      .cell:empty {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <table><tBody>
      <tr><td class="cell"></td><td class="cell">Not empty</td></tr>
      <tr><td class="cell">Not empty</td><td class="cell"></td></tr>
    </tBody></table>
  </body>
</html>

In modernen Browsern sehen Sie, dass leere Zellen blau und Zellen mit Inhalt rot sind. Der Schlüssel hier ist die erste Zeile von CSS, .cell:not(:empty). Dies wendet das CSS an, wenn auf das Element nicht die Pseudo-Klasse :empty angewendet wurde.

Nein, mit rein Cross-Browser CSS ist es nicht. Sie müssen ihre CMS bearbeiten oder Javascript verwenden.

  • Technisch gesehen ist diese Antwort wahr. Allerdings verwenden nicht viele Leute Browser, die fehlen grundlegende Unterstützung zum :not mehr.

    – Michael Stalker

    27. Mai 2016 um 17:43 Uhr


1226220cookie-checkInhaltsbezogenes CSS – Stil nur anwenden, wenn Inhalt verfügbar ist

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy