HTML-Elemente über die CSS-Selektoren ansprechen

Um die unterschiedlichen Elemente einer Website auch entsprechend individuell zu gestalten, muss man diese auch eindeutig mit CSS ansprechen können. Hier kommen die CSS Selektoren zum Einsatz, die genau dies auf vielerlei Art ermöglichen. Hier möchte ich ein paar nützliche Selektoren inklusive kurzem Beispiel aufführen, die häufig zum Einsatz kommen.

Interne und externe Links kennzeichnen

Folgendes Beispiel zeigt einige Möglichkeiten Links abhängig vom href-Attribut zu stylen:

Erklärung

Alle Links werden blau ohne Unterstrich dargestellt:

a {  color: #000099;  text-decoration: none; }

Alle Links deren href-Attribut mit http beginnt werden grün unterstrichen

a[href^="http"] { border-bottom: 1px solid #009900; }

Alle Links deren href-Attribut das Wort intern enthalten werden grün gefärbt:

a[href*="intern"] { color: #009900; }

Alle Links deren href-Attribut das Wort extern enthalten werden rot gefärbt:

a[href*="extern"] { color: #990000; }

Alle Links deren target-Attribut gleich _blank ist werden gefettet (gerne für externe Links genommen):

a[target=_blank] { font-weight: bold; }

 

Download-Links nach Datei-Typ kennzeichnen

Wenn nun Download-Links entsprechend des zu ladenden Dateityps gekennzeichnet werden sollen, kann man auch hier wieder auf das href-Attribut prüfen und entsprechende Grafikstile zuweisen. Mittels des $-Parameters wird die Endung des Datei-Links ermittelt, die den Datei-Typ repräsentiert.

Hier ein Beispiel:

Alle Links deren href-Attribut das Wort downloads grundlegende Styles zuweisen:

a[href*="downloads"] { display: block; height: 20px; padding: 5px 25px; }

Jetzt entsprechend der Dateiendung im href-Attribut das passende Icon über den Hintergrund zuweisen:

a[href*="pdf"] { background: url(https://cdn4.iconfinder.com/data/icons/file-extensions-1/64/pdfs-24.png) no-repeat; }
 a[href*="doc"] { background: url(https://cdn4.iconfinder.com/data/icons/file-extensions-1/64/docs-24.png) no-repeat; }

 

Tabellen oder Listen mittels Child-Selektor ansprechen und gestalten

Auch Tabellen und Listen lassen sich problemlos mit allerlei Selektoren ansprechen und gestalten. Beispielsweise lassen sich explizit nur gerade oder ungerade Zeilen ansprechen. Vielleicht soll auch nur das Erste beziehungsweise n-te Element einer Liste anders aussehen, oder doch lieber das vierte von unten.

Hier nun wieder der Code:

Das erste Element der Liste bitte in grün:

li:nth-child(1) { color: #009900; }

Das letzte Element der Liste in rot:

li:nth-last-child(1) { color: #990000; }

Das dritte von oben fett:

li:nth-of-type(3) { font-weight: bold; }

Das vierte Element von unten bitte unterstrichen:

li:nth-last-of-type(4) { text-decoration: underline; }

In der Tabelle jede gerade Zeile hellgrau:

tr:nth-child(even) { background-color: #f9f9f9; }

Und jede ungerade Zeile etwas dunkler:

tr:nth-child(odd) { background-color: #cccccc; }

Damit ist die Liste allerdings noch nicht zu Ende. Auf w3schools.com findet ihr eine gut gemachte Übersicht, sowie einen Selektoren-Tester, um die Selektoren im live-Einsatz zu sehen. Ebenso ist der Beitrag auf Wikipedia eine gute Quelle zum nachschlagen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

5 × drei =