CSS-Selektoren
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)
CSS Pseudo-Elemente(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.
Was sind Pseudo-Elemente?
Ein CSS Pseudo-Element wird verwendet zum stylen einen spezifischen Teil eines Elementes. Zum Beispiel kann es verwendet werden: Stylen des ersten Buchstaben oder der ersten Linie eines Elementes. Fügt Inhalt vor oder nach Element-(Inhalt) ein.Syntax:
Der Syntax von Pseudo-Elementen:selector::pseudo-element {property: value;}
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| p::first-line { |
| color: #ff0000; |
| font-variant: small-caps; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Du kann verwenden das ::first-line Pseudo-Element um einen speziellen Effekt der ersten Zeile eines Textes hinzuzufügen. |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. |
| Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, |
| pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate </p> |
| </body> |
| </html> |
Pseudo-Elemente können kombiniert werden mit CSS-Klassen:
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| p.intro::first-letter { |
| color: #ff0000; |
| font-size: 200%; |
| } |
| </style> |
| </head> |
| <body> |
| <p class="intro">Dies ist ein Absatz.</p> |
| <p>Das ist ein Absatz mit einigem Text. Ein wenig Text.</p> |
| </body> |
| </html> |
Einige Pseudo-Elemente können kombiniert werden.
Im folgenden Beispiel, der erste Buchstaben eines Absatzes wird rot sein und eine XXL-Grösse aufweisen.
Der Rest von der ersten Linie wird blau und in Kleinbuchstaben geschrieben sein.
Der Rest vom Absatz wird die Buchstabengrösse und Farbe nach Vorlage aufweisen:
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| p::first-letter { |
| color: #ff0000; |
| font-size: xx-large; |
| } |
| p::first-line { |
| color: #0000ff; |
| font-variant: small-caps; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Du kannst kombinieren das ::first-letter und ::first-line Pseudo-Element<br> |
| für einen speziellen Effekt des ersten Buchstaben und die erste Zeile!</p> |
| </body> |
| </html> |
Das ::before Pseudo-Element fügt Inhalt vor den Inhalt eines Elementes ein.
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| h3::before { |
| content: url(Bilder/Logo12SmallScreen.png); |
| } |
| </style> |
| </head> |
| <body> |
| <h3>Das ist eine Überschrift</h3> |
| <p>Das ::before Pseudo-Element fügt Inhalt vor den Inhalt eines Elementes ein.</p> |
| <h3>Das ist eine Überschrift</h3> |
| </body> |
| </html> |
Das ::after Pseudo-Element kann verwendet werden für Inhalt nach dem Inhalt eines Elementes.
Das folgende Beispiel fügt ein Bild nach dem Inhalt jedes <h3> Elementes ein:
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| h3::after { |
| content: url(Bilder/Logo12SmallScreen.png); |
| } |
| </style> |
| </head> |
| <body> |
| <h3>Das ist eine Überschrift</h3> |
| <p>Das ::after Pseudo-Element fügt Inhalt nach dem Inhalt eines Elementes ein.</p> |
| <h3>Das ist eine Überschrift</h3> |
| </body> |
| </html> |
Das ::selection Pseudo-Element entspricht einem Teil eines Elementes das vom "User" ausgewählt wird.
Die folgenden CSS Eigenschaften können angewandt werden für ::selection: color, background, cursor, and outline.
Das folgende Beispiel formatiert denn vom "User" ausgewählten Text rot und den Hintergrund gelb:
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| ::-moz-selection { /* Code for Firefox */ |
| color: red; |
| background: yellow; |
| } |
| ::selection { |
| color: red; |
| background: yellow; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>Wähle einigen Text auf dieser Seite:</h1> |
| <p>Das ist ein Absatz.</p> |
| <div>Das ist einiger Text in einem div-Element.</div> |
| <p><strong>Bemerke:</strong> Firefox unterstützt eine Alternative, the ::-moz-selection Eigenschaft.</p> |
| </body> |
| </html> |
