Was sind Pseudo-Elemente?
Ein CSS Pseudoelement ist an Stil spezifizierten Teilen eines Elements verwendet.
Zum Beispiel kann es verwendet werden für:
- Stylen Sie den ersten Buchstaben oder Linie, eines Elements
- Einfügen Inhalt vor oder nach dem Inhalt eines Elements
Syntax
Die Syntax von Pseudo-Elemente:
selector::pseudo-element {
property:value;
} | Beachten Sie die Doppel - Doppelpunkt - Notation - ::first-line - Vergleich :first-line Die Doppel-Doppelpunkt ersetzt die Single-Doppelpunkt-Notation für Pseudo-Elemente in CSS3. Dies war ein Versuch von W3C zwischen Pseudoklassen und Pseudoelemente zu unterscheiden. Die Single-Doppelpunkt-Syntax wurde für beide Pseudoklassen und Pseudoelemente in CSS2 und CSS1 verwendet. Aus Gründen der Abwärtskompatibilität ist die Single-Doppelpunkt-Syntax für CSS2 und CSS1 Pseudo-Elemente akzeptabel. |
|---|
Die ::first-line - Pseudo-Element
Die ::first-line - Pseudoelement wird verwendet , um einen besonderen Stil auf die erste Zeile eines Textes hinzuzufügen.
Das folgende Beispiel formatiert die erste Zeile des Textes in allen <p> Elemente:
Hinweis: Die ::first-line - Pseudoelement nur dann angewendet werden kann , um Block-Level - Elemente.
Die folgenden Eigenschaften gelten für die ::first-line - Pseudoelement:
- font
- color
- background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
Das ::first-letter Pseudo-Element
Die ::first-letter Pseudoelement wird verwendet , um einen besonderen Stil auf den ersten Buchstaben eines Textes hinzuzufügen.
Das folgende Beispiel formatiert den ersten Buchstaben des Textes in allen <p> Elemente:
Hinweis: Die ::first-letter Pseudoelement nur dann angewendet werden kann , um Block-Level - Elemente.
Die folgenden Eigenschaften gelten für die ::first-letter pseudo- Element:
- font
- color
- background Eigenschaften
- margin Eigenschaften
- padding Eigenschaften
- border Eigenschaften
- text-decoration
- vertical-align (nur wenn "float" ist "none" )
- text-transform
- line-height
- float
- clear
Pseudo-Elemente und CSS-Klassen
Pseudo-Elemente können mit CSS-Klassen kombiniert werden:
Das obige Beispiel den ersten Buchstaben der Absätze mit Anzeige class="intro" , in rot und in einer größeren Größe.
Mehrere Pseudo-Elemente
Mehrere Pseudo-Elemente können auch kombiniert werden.
Im folgenden Beispiel wird der erste Buchstabe eines Absatzes rot sein, in einer xx-Schriftgröße groß. Der Rest der ersten Zeile wird blau, und in Small Caps sein. Der Rest des Absatzes wird die Standard-Schriftgröße und Farbe sein:
Beispiel
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
p::first-line
{
color: #0000ff;
font-variant: small-caps;
} Versuch es selber " CSS - Das ::before Pseudo-Element
Die ::before Pseudo-Element kann verwendet werden , einige Inhalte vor dem Inhalt eines Elements einzufügen.
Das folgende Beispiel fügt ein Bild vor dem Inhalt der einzelnen <h1> Element:
CSS - Das ::after Pseudo-Element
Die ::after pseudo-Element verwendet werden kann , einige Inhalte nach dem Inhalt eines Elements einzufügen.
Das folgende Beispiel fügt ein Bild nach dem Inhalt jedes <h1> Element:
CSS - Das ::selection Pseudo-Element
Die ::selection pseudo-Element entspricht den Teil eines Elements , das durch einen Benutzer ausgewählt wird.
Die folgenden CSS - Eigenschaften können angewendet werden ::selection : color , background , cursor , und outline .
Im folgenden Beispiel wird in dem markierten Text rot auf gelbem Grund:
Testen Sie sich mit Übungen!
Alle CSS Pseudo-Elemente
| Wähler | Beispiel | Beispiel Beschreibung |
|---|---|---|
| ::after | p::after | Legen Sie etwas nach dem Inhalt jedes Element <p> |
| ::before | p::before | Legen Sie etwas vor dem Inhalt jedes <p> Element |
| ::first-letter | p::first-letter | Wählt den ersten Buchstaben jedes <p> Element |
| ::first-line | p::first-line | Wählt die erste Zeile jedes <p> Element |
| ::selection | p::selection | Wählt den Teil eines Elements, das durch einen Benutzer ausgewählt wird, |
Alle CSS-Pseudo-Klassen
| Wähler | Beispiel | Beispiel Beschreibung |
|---|---|---|
| :active | a:active | Wählt den aktiven Link |
| :checked | input:checked | Wählt alle geprüft <input> Element |
| :disabled | input:disabled | Wählt alle deaktiviert <input> Element |
| :empty | p:empty | Wählt alle <p> Element , das keine Kinder hat |
| :enabled | input:enabled | Wählt alle aktiviert <input> Element |
| :first-child | p:first-child | Wählt alle <p> Elemente , die das erste Kind seiner Eltern ist |
| :first-of-type | p:first-of-type | Wählt alle <p> Element , das die erste ist , <p> Element des übergeordneten |
| :focus | input:focus | Wählt das <input> Element , das den Fokus hat |
| :hover | a:hover | Wählt Links auf der Maus über |
| :in-range | input:in-range | Wählt <input> Elemente mit einem Wert innerhalb eines bestimmten Bereichs |
| :invalid | input:invalid | Wählt alle <input> Elemente mit einem ungültigen Wert |
| :lang(language) | p:lang(it) | Wählt alle <p> Element mit einem Attribut lang Wert beginnend mit "it" |
| :last-child | p:last-child | Wählt alle <p> Elemente , die das letzte Kind seiner Eltern ist |
| :last-of-type | p:last-of-type | Wählt alle <p> Element , das das letzte ist <p> Element des übergeordneten |
| :link | a:link | Wählt alle nicht besuchte Links |
| :not(selector) | :not(p) | Jedes Element Wählt die nicht a <p> Element |
| :nth-child(n) | p:nth-child(2) | Wählt alle <p> Element , das das zweite Kind seiner Eltern ist |
| :nth-last-child(n) | p:nth-last-child(2) | Wählt alle <p> Element , das das zweite Kind seiner Eltern ist, aus dem letzten Kind zu zählen |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Wählt alle <p> Element , das die zweite ist <p> Element seiner Eltern, aus dem letzten Kind zu zählen |
| :nth-of-type(n) | p:nth-of-type(2) | Wählt alle <p> Element , das die zweite ist <p> Element des übergeordneten |
| :only-of-type | p:only-of-type | Wählt alle <p> Element , das das einzige ist <p> Element des übergeordneten |
| :only-child | p:only-child | Wählt alle <p> Element , das das einzige Kind seiner Eltern ist |
| :optional | input:optional | Wählt <input> Elemente ohne "required" Attribut |
| :out-of-range | input:out-of-range | Wählt <input> Elemente mit einem Wert außerhalb eines bestimmten Bereichs |
| :read-only | input:read-only | Wählt <input> Elemente mit einem "readonly" Attribut angegeben |
| :read-write | input:read-write | Wählt <input> Elemente ohne "readonly" Attribut |
| :required | input:required | Wählt <input> Elemente mit einem "required" Attribut angegeben |
| :root | root | Wählt das Stammelement des Dokuments |
| :target | #news:target | Wählt den aktuellen aktiven #news Element (auf einer URL enthält , die Ankernamen angeklickt) |
| :valid | input:valid | Wählt alle <input> Elemente mit einem gültigen Wert |
| :visited | a:visited | Wählt alle besuchten Links |