CSS väljare referenshandbok
- Föregående sida CSS-webbläsarstöd
- Nästa sida CSS-kombinator
CSS-väljare
CSS-väljare används för att "hitta" (eller välja) HTML-element som du vill applicera stil på.
Använd vår CSS-väljartester för att demonstrera olika väljare.
CSS-enkel väljare
Enkel väljare väljer element baserat på elementnamn, id och klass. Dessutom finns det allmänna väljare (*
)
Väljare | Exempel | Exempelbeskrivning |
---|---|---|
element | p | Välj alla <p>-element. |
#id | #firstname | Välj elementet med id="firstname". |
* | * | Välj alla element. |
.class | .intro | Välj alla element med class="intro". |
CSS-attributväljare
Attributväljare väljer HTML-element med en given egenskapsuppsättning.
Väljare | Exempel | Exempelbeskrivning |
---|---|---|
[attribute] | [target] | Välj alla element med attributet target. |
[attribute=value] | [target=_blank] | Välj alla element med attributet target="_blank". |
[attribute~=value] | [title~=flower] | Välj alla element där title-egenskapen innehåller ordet "flower". |
[attribute|=value] | [lang|=en] | Välj alla element där lang-egenskapen börjar med "en". |
[attribute^=value] | a[href^="https"] | Välj varje <a>-element där href-egenskapen börjar med "https". |
[attribute$=value] | a[href$=".pdf"] | Välj varje <a>-element där src-egenskapen slutar med ".pdf". |
[attribute*=value] | a[href*="codew3c"] | Välj varje <a>-element som innehåller understrängen "abc" i href-egenskapen. |
CSS inbäddade väljare
Väljare | Exempel | Exempelbeskrivning |
---|---|---|
& | & | Använda stil på en element i kontexten av ett annat element |
- Föregående sida CSS-webbläsarstöd
- Nästa sida CSS-kombinator