CSS Selektors
CSS Selektoren werden verwendet um HTML-Elemente zu "finden" (oder wählen) die gestylt werden. Man kann CSS-Selektoren in 5 Kategorien unterteilen:Einfache Selektoren (Elemente basierend auf Name, ID, Klasse auswählen)
Kombinator-Selektoren(Elemente basierend auf einer bestimmten Beziehung zwischen ihnen auswählen)
Pseudoklassenselektoren (Elemente basierend auf einem bestimmten Zustand auswählen)
Pseudoelement-Selektoren (einen Teil eines Elements auswählen und formatieren)
Attributselektoren(Elemente basierend auf einem Attribut oder Attributwert auswählen)
Auf dieser Seite werden die grundlegendsten CSS-Selektoren erläutert.Es ist möglich zu stylen HTML-Elemente mit einem spezifischen Attribut oder einem Attribut-Wert.
CSS [attribute]-Selektor
Der [attribute]-Selektor wird verwendet um ein Element auszuwählen mit einem spezifischen Attribut. Das folgende Beispiel wählt alle <a> Elemente mit dem target-Attribut:
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| a[target] { |
| background-color: yellow; |
| } |
| </style> |
| </head> |
| <body> |
| <h2>CSS [attribute] Selektor</h2> |
| <p>Die Links mit dem target Attribut werde mit einem gelben Hintergrund formatiert:</p> |
| <a href="https://www.strassencoder.ch">strassencoder.ch</a> |
| <a href="http://www.blick.ch" target="_blank">blick.ch</a> |
| <a href="http://www.bild.de" target="_top">bild.de</a> |
| </body> |
| </html> |
Der [attribute="value"] Selektor wird verwendet um ein Element auszuwählen mit einem spezifischen Attribut und Wert.
Das folgende Beispiel wählt alle <a> Elemente mit dem target="_blank" Attribut:
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| a[target=_blank] { |
| background-color: yellow; |
| } |
| </style> |
| </head> |
| <body> |
| <h2>CSS [attribute="value"] Selektor</h2> |
| <p>Der Link mit with target="_blank" wird formatiert mit einem gelben Hintergrund:</p> |
| <a href="https://www.strassencoder.ch">strassencoder.ch</a> |
| <a href="http://www.blick.ch" target="_blank">blick.ch</a> |
| <a href="http://www.bild.de" target="_top">bild.de</a> |
| </body> |
| </html> |
Der [attribute~="value"] Selektor wird verwendet um ein Element auszuwählen mit einem Attribut-Wert in dem sich ein bestimmtes Wort befindet.
Das folgende Beispiel wählt alle Elemente mit dem Titel-Attribut mit dem beinhaltenden Wort "CSS-Image":
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| [title~=CSS-Image] { |
| border: 5px solid yellow; |
| } |
| </style> |
| </head> |
| <body> |
| <h2>CSS [attribute~="value"] Selektor</h2> |
| <p>Alle Bilder die das Wort "CSS-Image" im Title-Attribut beinhaltet wird ein gelber Rahmen hinzugefügt.</p> |
| <img src="Bilder/HTMLExample.png" title="HTML-Image" width="150" height="113"> |
| <img src="Bilder/CSSExample.png" title="CSS-Image" width="224" height="162"> |
| <img src="Bilder/JavascriptExample.png" title="Javascript-Image" width="200" height="358"> |
| </body> |
| </html> |
Das [attribute|="value"] Selektor wird verwendet um ein Attribut startend mit einem spezifischen Wert auszuwählen.
Das folgende Beispiel wählt alle Elemente mit einem class-Attribut das beginnt mit "top":
Bemerke: Der Wert hat zu sein ein ganzes Wort, oder allein, wie class="top", oder gefolgt von einem Bindestrich( - ), wie class="top-text"!
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| [class|=top] { |
| background: yellow; |
| } |
| </style> |
| </head> |
| <body> |
| <h2>CSS [attribute|="value"] Selektor</h2> |
| <h1 class="top-header">Das ist ein Tutorial über HTML und CSS</h1> |
| <p class="top-text">Auf dieser Webseite lernst du HTML-5 !</p> |
| <p class="topcontent">Und auch CSS-3 !!!</p> |
| </body> |
| </html> |
Der [attribute^="value"] Selektor wird verwendet um ein Element auszuwählen das beginnt mit einem bestimmten Wort.
Das folgende Beispiel wählt allem Elemente mit einem class-Attribut Wert der beginnt mit dem Wort "top":
Bemerke: Der Wert muss nicht das ganze Wort sein!
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| [class^="top"] { |
| background: yellow; |
| } |
| </style> |
| </head> |
| <body> |
| <h2>CSS [attribute^="value"] Selektor</h2> |
| <h1 class="top-header">In diesem Tutorial lernst du HTML und CSS</h1> |
| <p class="top-text">In diesem Tutorial werden alle HTML-Tags erläutert !</p> |
| <p class="topcontent">Hier lernst du gerade die CSS-Selektoren kennen !</p> |
| </body> |
| </html> |
Der [attribute$="value"] Selektor wird verwendet um ein Elemente auszuwählen mit dem der Attribut-Wert endet.
Das folgende Beispiel wählt alle Elemente mit einem class-Attribut das mit "test" endet:
Bemerke: Der Wert muss nicht das ganze Wort beinhalten!
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| [class$="test"] { |
| background: yellow; |
| } |
| </style> |
| </head> |
| <body> |
| <h2>CSS [attribute$="value"] Selektor</h2> |
| <div class="first_test">Das erste div-Element.</div> |
| <div class="second">Das zweite div-Element.</div> |
| <div class="my-test">Das dritte div-Element.</div> |
| <p class="mytest">Dies ist einiger Text in einem Absatz.</p> |
| </body> |
| </html> |
Der Attribut-Selektor kann nützlich sein um Formulare zu stylen ohne class oder id:
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| input[type=text] { |
| width: 150px; |
| display: block; |
| margin-bottom: 10px; |
| background-color: yellow; |
| } |
| input[type=button] { |
| width: 120px; |
| margin-left: 35px; |
| display: block; |
| } |
| </style> |
| </head> |
| <body> |
| <h2>Formatieren eines Formulares</h2> |
| <form> |
| Vorname:<input type="text" name="Name"> |
| Nachname:<input type="text" name="Name"> |
| <input type="button" value="Button"> |
| </form> |
| </body> |
| </html> |
