Attributvergabe in CSS

[Gerd]

Hallo,

wie kann ich das CSS möglichst kurz darstellen?

CSS
th.Land {
     text-align:left;
}
th.PLZ {
     text-align:center;
}
th.Stadt {
     text-align:right;
}
td.Land {
     text-align:left;
}
td.PLZ {
     text-align:center;
}
td.Stadt {
     text-align:right;
}



HTML
         <table>
		   <thead>
             <tr>
			   <th class="Land">>Land</a></th>
               <th class="PLZ">PLZ</th>
               <th class="Stadt">>Gemeinde</a></th>
                           ..........
             </tr>
		   </thead>
		   <tbody>
             <tr>
			   <td class="Land">NW</td>	
			   <td class="PLZ">11111</td>	
			   <td class="Stadt">Hintertuxing</td>	
                           ..........
			 </tr>
             <tr>
			   <td class="Land">oi</td>	
			   <td class="PLZ">16511</td>	
			   <td class="Stadt">Reging</td>	
                           ..........
			 </tr>
             <tr>
			   <td class="Land">htW</td>	
			   <td class="PLZ">11777</td>	
			   <td class="Stadt">Walli</td>	
                           ..........
			 </tr>
             <tr>
			   <td class="Land">pw</td>	
			   <td class="PLZ">37878</td>	
			   <td class="Stadt">Watterfaa</td>	
                           ..........
			 </tr>
		   <tbody>
         </table>
		 
		 

[Gunnar Bittersmann]

@@Gerd

wie kann ich das CSS möglichst kurz darstellen?

th.Land {
     text-align:left;
}
th.PLZ {
     text-align:center;
}
th.Stadt {
     text-align:right;
}
td.Land {
     text-align:left;
}
td.PLZ {
     text-align:center;
}
td.Stadt {
     text-align:right;
}

.Land{text-align:left}.PLZ{text-align:center}.Stadt{text-align:right}

(Unter der Voraussetzung, dass keine anderen Elemente außer den Tabellenzellen diese Klassen tragen. Ansonsten:

th,td{&.Land{text-align:left}&.PLZ{text-align:center}&.Stadt{text-align:right}}

)

Aber was ist der Sinn von „möglichst kurz“? „Möglichst lesbarer“ Code wäre ein erstrebenswerteres Ziel:

th, td {
  &.Land {
    text-align: left;
  }

  &.PLZ {
    text-align: center;
  }

  &.Stadt {
    text-align: right;
  }
}

🖖 Live long and prosper

[Gerd]

th, td {
  &.Land {
    text-align: left;
  }

  &.PLZ {
    text-align: center;
  }

  &.Stadt {
    text-align: right;
  }
}

Das gefällt mir am besten.

Wenn es nur für eine bestimmte Tabelle gelten soll, ist dann folgendes korekt?

table.v1 th, td {
  &.Land {
    text-align: left;
  }

  &.PLZ {
    text-align: center;
  }

  &.Stadt {
    text-align: right;
  }
}

HTML

<table class="v1"> ......

[Gunnar Bittersmann]

@@Gerd

Wenn es nur für eine bestimmte Tabelle gelten soll, ist dann folgendes korekt?

Nein.

table.v1 th, td {
  &.Land {
    text-align: left;
  }
}

Das wäre aufgedröselt

table.v1 th.Land, td.Land {
  text-align: left;
}

selektiert also alle th-Elemente der Klasse Land, die sich in einer table der Klasse v1 befinden, sowie alle td-Elemente der Klasse Land (egal, ob sie sich in einer table der Klasse v1 befinden oder nicht).

Um th, td muss eine Klammer drum:

table.v1 :is(th, td) {
  &.Land {
    text-align: left;
  }
}

Oder so:

table.v1 {
  th, td {
    &.Land {
      text-align: left;
    }
  }
}

Aber: Selbst wenn es außerhalb der Tabelle noch Elemente der Klassen Land etc. geben sollte, werden die ja im Kontext table.v1 nicht selektiert. Das heißt: die Elementtypen brauchst du überhaupt nicht.

table.v1 {
  .Land {
    text-align: left;
  }
}

Dass das & jetzt weggefallen ist, hat seine Richtigkeit. .Land bezieht sich ja nicht auf das Element table.v1, sondern auf Nachfahren davon.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

table.v1 {
  .Land {
    text-align: left;
  }
}

Ähm, was irgendwie seltsam kompliziert aussieht. Warum nicht einfach

table.v1 .Land {
  text-align: left;
}

Die Sache sieht aber anders aus im Gesamtzusammenhang:

table.v1 .Land {
  text-align: left;
}

table.v1 .PLZ {
  text-align:center;
}

table.v1 .Stadt {
  text-align:right;
}

vs.

table.v1 {
  .Land {
    text-align: left;
  }

  .PLZ {
     text-align:center;
  }

  .Stadt {
     text-align:right;
  }
}

Da macht das mit dem Nesting schon Sinn.

🖖 Live long and prosper

[MrMurphy]

th.Land,
td.Land {
     text-align:left;
}
th.PLZ,
td.PLZ {
     text-align:center;
}
th.Stadt,
td.Stadt {
     text-align:right;
}

oder (finde ich etwas unübersichtlicher)

th.Land, td.Land {
     text-align:left;
}
th.PLZ, td.PLZ {
     text-align:center;
}
th.Stadt, td.Stadt {
     text-align:right;
}

oder (noch unübersichtlicher)

th.Land, td.Land {text-align:left;}
th.PLZ, td.PLZ {text-align:center;}
th.Stadt, td.Stadt {text-align:right;}

Ob noch mehr Leerzeichen oder Zeilenumbrüche entfernt werden können kannst du jetzt wahrscheinlich selbst ausprobieren.

[Gunnar Bittersmann]

@@MrMurphy

th.Land,
td.Land {
     text-align:left;
}

Das zweimalige Vorkommen der Klasse in der Selektorenliste ist nicht so gut. DRY!

Das lässt sich vermeiden: wie gezeigt mit Nesting oder mit :is():

:is(th, td).Land {
  text-align: left;
}

Die Frage steht noch im Raum, ob man den Elementtypen da braucht oder ob es nicht einfach

.Land {
  text-align: left;
}

auch tut.

🖖 Live long and prosper

[MrMurphy]

https://forum.selfhtml.org/self/2025/feb/25/divs-ohne-zwischenabstande/1819006#m1819006

[Gunnar Bittersmann]

@@Gunnar Bittersmann

@@MrMurphy

th.Land,
td.Land {
     text-align:left;
}

Das zweimalige Vorkommen der Klasse in der Selektorenliste ist nicht so gut. DRY!

Was du übrigens hättest wissen sollen. Ich erinnere an vor 3 Monaten.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gerd

Ich versuch mir gerade vorzustellen, wie deine Tabelle dann dargestellt wird. Scheußlich.

Land	PLZ	Gemeinde
NW	11111	Hintertuxing
oi	16511	Reging
htW	11777	Walli
pw	37878	Watterfaa

Die Spalte „Gemeinde“ ist durch das Flattern am Anfang schwer zu lesen. Strings sollten (bei von links nach rechts geschriebenen Schriften) linksbündig ausgerichtet sein.

Bei Zahlen kann es sinnvoll sein, diese rechts auszurichten, damit man sie besser vergleichen kann. (Dazu sollten alle die gleiche Anzahl von Kommastellen haben. Und dicktengleiche Ziffern verwendet werden: OpenType-Feature tnum; CSS: font-variant-numeric: tabular-nums.)

Postleitzahlen sind entgegen ihrer Bezeichnung keine Zahlen, sondern Strings.

🖖 Live long and prosper

[Gerd]

Ich versuch mir gerade vorzustellen, wie deine Tabelle dann dargestellt wird. Scheußlich.

Land	PLZ	Gemeinde
NW	11111	Hintertuxing
oi	16511	Reging
htW	11777	Walli
pw	37878	Watterfaa

Die Spalte „Gemeinde“ ist durch das Flattern am Anfang schwer zu lesen. Strings sollten (bei von links nach rechts geschriebenen Schriften) linksbündig ausgerichtet sein.

Die Ausrichtung habe ich einfach Spalte für Spalte mit left, center, right angegeben. Es ging mir nicht darum, hier eine schöne Tabelle zu präsentieren, sondern um meine Eingangsfrage.

[Rolf B]

Hallo Gerd,

die Klassenmethode kann man wählen. Muss man aber nicht. Nötig ist sie, wenn man rowspan- oder colspan-Zellen drin hat, weil dann die Nummern der Zellen in ihrer Row nicht mehr einheitlich sind.

Wenn keine Zell-Spans verwendet werden, kannst Du an Stelle von Klassen auch mit Spaltennummern arbeiten. Dein CSS ist dann vielleicht etwas größer, aber dein HTML wird kompakter.

.foo-table {
  th, td {
    &:nth-child(1) {
      text-align: left;
    }
    &:nth-child(2) {
      text-align: center;
    }
    &:nth-child(3) {
      text-align: right;
    }
  }
}

<table class="foo-table">
  <thead>
    <tr>
      <th>Land</th>
      <th>PLZ</th>
      <th>Ort</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>D</td>
      <td>12345</td>
      <td>Musterhausen</td>
    </tr>
  </tbody>
</table>

Look Ma, all cells without classes!

Dass CSS verwendet Schachtelung von Regeln, was seit August 2023 in allen Evergreen-Browsern verfügbar ist.

Rolf