w3ii 'CSS Referenz wird regelmäßig mit allen gängigen Browsern getestet.
CSS-Selektoren
In CSS sind Selektoren Muster verwendet , um das zu wählen element(s) Sie Stil wollen.
Die "CSS" Spalte zeigt an, in der CSS - Version wird die Eigenschaft definiert (CSS1, CSS2, or CSS3) .
| Wähler | Beispiel | Beispiel Beschreibung | CSS |
|---|---|---|---|
| . class | .intro | Wählt alle Elemente mit class="intro" | 1 |
| # id | #firstname | Wählt das Element mit id="firstname" | 1 |
| * | * | Wählt alle Elemente | 2 |
| element | p | Wählt alle <p> Elemente | 1 |
| element,element | div, p | Wählt alle <div> Elemente und alle <p> Elemente | 1 |
| element element | div p | Wählt alle <p> Elemente innerhalb <div> Elemente | 1 |
| element > element | div > p | Wählt alle <p> Elemente , bei denen die Eltern a <div> Element | 2 |
| element + element | div + p | Wählt alle <p> Elemente , die unmittelbar nach platziert werden <div> Elemente | 2 |
| element1 ~ element2 | p ~ ul | Wählt jedes <ul> Element , das durch eine vorausgeht <p> Element | 3 |
| [ attribute ] | [target] | Wählt alle Elemente mit einem Zielattribut | 2 |
| [ attribute = value ] | [target=_blank] | Wählt alle Elemente mit target="_blank" | 2 |
| [ attribute ~= value ] | [title~=flower] | Wählt alle Elemente mit einem Titel - Attribut mit dem Wort "flower" | 2 |
| [ attribute |= value ] | [lang|=en] | Wählt alle Elemente mit einem Attribut lang Wert beginnend mit "en" | 2 |
| [ attribute ^= value ] | a[href^="https"] | Wählt jedes <a> Element , dessen href Attribut - Wert beginnt mit "https" | 3 |
| [ attribute $= value ] | a[href$=".pdf"] | Wählt jedes <a> Element , dessen href Attributwert mit endet ".pdf" | 3 |
| [ attribute *= value ] | a[href*="w3ii"] | Wählt jedes <a> Element , dessen href Attributwert die Zeichenkette enthält "w3ii" | 3 |
| :active | a:active | Wählt den aktiven Link | 1 |
| ::after | p::after | Legen Sie etwas nach dem Inhalt jedes <p> Element | 2 |
| ::before | p::before | Legen Sie etwas vor dem Inhalt jedes <p> Element | 2 |
| :checked | input:checked | Wählt alle geprüft <input> Element | 3 |
| :disabled | input:disabled | Wählt alle deaktiviert <input> Element | 3 |
| :empty | p:empty | Wählt alle <p> Element , das keine Kinder hat (including text nodes) | 3 |
| :enabled | input:enabled | Wählt alle aktiviert <input> Element | 3 |
| :first-child | p:first-child | Wählt alle <p> Element , das das erste Kind seiner Eltern ist | 2 |
| ::first-letter | p::first-letter | Wählt den ersten Buchstaben jedes <p> Element | 1 |
| ::first-line | p::first-line | Wählt die erste Zeile jedes <p> Element | 1 |
| :first-of-type | p:first-of-type | Wählt alle <p> Element , das die erste ist , <p> Element des übergeordneten | 3 |
| :focus | input:focus | Wählt das Eingangselement, das den Fokus hat | 2 |
| :hover | a:hover | Wählt Links auf der Maus über | 1 |
| :in-range | input:in-range | Wählt Eingabeelemente mit einem Wert innerhalb eines bestimmten Bereichs | 3 |
| :invalid | input:invalid | Wählt alle Eingabeelemente mit einem ungültigen Wert | 3 |
| :lang( language ) | p:lang(it) | Wählt alle <p> Element mit einem lang gleich Attribut "it" (Italian) | 2 |
| :last-child | p:last-child | Wählt alle <p> Element , das das letzte Kind seiner Eltern ist | 3 |
| :last-of-type | p:last-of-type | Wählt alle <p> Element , das das letzte ist <p> Element des übergeordneten | 3 |
| :link | a:link | Wählt alle nicht besuchte Links | 1 |
| :not( selector ) | :not(p) | Jedes Element Wählt die nicht a <p> Element | 3 |
| :nth-child( n ) | p:nth-child(2) | Wählt alle <p> Element , das das zweite Kind seiner Eltern ist | 3 |
| :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 | 3 |
| :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 | 3 |
| :nth-of-type( n ) | p:nth-of-type(2) | Wählt alle <p> Element , das die zweite ist <p> Element des übergeordneten | 3 |
| :only-of-type | p:only-of-type | Wählt alle <p> Element , das das einzige ist <p> Element des übergeordneten | 3 |
| :only-child | p:only-child | Wählt alle <p> Element , das das einzige Kind seiner Eltern ist | 3 |
| :optional | input:optional | Wählt Eingabeelemente ohne "required" Attribut | 3 |
| :out-of-range | input:out-of-range | Wählt Eingabeelemente mit einem Wert außerhalb eines bestimmten Bereichs | 3 |
| :read-only | input:read-only | Wählt Eingabeelemente mit dem "readonly" Attribut angegeben | 3 |
| :read-write | input:read-write | Wählt Eingabeelemente mit dem "readonly" NICHT angegebene Attribut | 3 |
| :required | input:required | Wählt Eingabeelemente mit dem "required" Attribut angegeben | 3 |
| :root | :root | Wählt das Stammelement des Dokuments | 3 |
| ::selection | ::selection | Wählt den Teil eines Elements, das durch einen Benutzer ausgewählt wird, | |
| :target | #news:target | Wählt den aktuellen aktiven #news Element (auf einer URL enthält, die Ankernamen angeklickt) | 3 |
| :valid | input:valid | Wählt alle Eingabeelemente mit einem gültigen Wert | 3 |
| :visited | a:visited | Wählt alle besuchten Links | 1 |