Et CSS-pseudo-element bruges til at style specificerede dele af et element.
Det kan for eksempel bruges til at:
Stil det første bogstav eller linje i et element
Indsæt indhold før eller efter indholdet af et element
Syntaksen af pseudo-elementer:
selector::pseudo-element {
property: value;
}::first-line pseudo-elementet bruges til at tilføje en speciel stilart til den første linje i en tekst.
Følgende eksempel formaterer den første linje af teksten i alle <p> elementer:
p::first-line
{
color: #ff0000;
font-variant: small-caps;
}Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>
</body>
</html>
Bemærk: ::first-line pseudo-elementet kan kun anvendes på blokniveau elementer.
Følgende egenskaber gælder for ::first-line pseudo-element:
skrifttype egenskaber
farveegenskaber
baggrundsegenskaber
ord-mellemrum
bogstavmellemrum
tekst-dekoration
lodret justere
tekst-transformation
linjehøjde
klar
Bemærk den dobbelte kolonnotation - ::first-line versus :first-line
Dobbeltkolonet erstattede enkeltkolonet notation for pseudo-elementer i CSS3. Dette var et forsøg fra W3C til skelne mellem pseudo-klasser og pseudo-elementer.
Enkeltkolonsyntaksen blev brugt for både pseudo-klasser og pseudo-elementer i CSS2 og CSS1.
For bagudkompatibilitet er enkeltkolonsyntaksen acceptabel for CSS2 og CSS1 pseudo-elementer.
::first-letter pseudo-elementet bruges til at tilføje en speciel stil til den første bogstav i en tekst.
Følgende eksempel formaterer det første bogstav i teksten i alle <p> elementer:
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
</style>
</head>
<body>
<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
</html>
Bemærk: ::first-letter pseudo-elementet kan kun anvendes på blokniveau elementer.
Følgende egenskaber gælder for pseudo-elementet ::første bogstav:
skrifttype egenskaber
farveegenskaber
baggrundsegenskaber
margin egenskaber
polstringsegenskaber
grænseejendomme
tekst-dekoration
lodret-juster (kun hvis "float" er "ingen")
tekst-transformation
linjehøjde
flyde
klar
Pseudo-elementer kan kombineres med HTML-klasser:
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
} Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
</style>
</head>
<body>
<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>
</body>
</html>
Eksemplet ovenfor viser det første bogstav i afsnit med class="intro", in rød og i en større størrelse.
Flere pseudo-elementer kan også kombineres.
I det følgende eksempel vil det første bogstav i et afsnit være rødt, i en xx-stor skriftstørrelse. Resten af den første linje vil være blå og ind small-caps. Resten af afsnittet vil være standard skriftstørrelse og farve:
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
p::first-line
{
color: #0000ff;
font-variant: small-caps;
}Prøv det selv →
<!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>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>
</body>
</html>
::before pseudo-elementet kan bruges til at indsætte noget indhold før indholdet af et element.
Følgende eksempel indsætter et billede før indholdet af hvert <h1>-element:
h1::before
{
content: url(smiley.gif);
}Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: url(smiley.gif);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>
<h1>This is a heading</h1>
</body>
</html>
::after pseudo-elementet kan bruges til at indsætte noget indhold efter indholdet af et element.
Følgende eksempel indsætter et billede efter indholdet af hvert <h1>-element:
h1::after
{
content: url(smiley.gif);
}Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: url(smiley.gif);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::after pseudo-element inserts content after the content of an element.</p>
<h1>This is a heading</h1>
</body>
</html>
::marker pseudo-elementet vælger markører af listeelementer.
Følgende eksempel stiler markørerne for listeelementer:
::marker {
color: red;
font-size: 23px;
}Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
::marker {
color: red;
font-size: 23px;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
</body>
</html>
::selection pseudo-elementet matcher den del af et element, der er valgt af en bruger.
Følgende CSS-egenskaber kan anvendes på ::selection: farve, baggrund, cursor og outline.
Følgende eksempel gør den markerede tekst rød på en gul baggrund:
::selection {
color: red;
background: yellow;
}Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
::selection {
color: red;
background: yellow;
}
</style>
</head>
<body>
<h1>Select some text on this page:</h1>
<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>
</body>
</html>
Eksempel
p::after
Eksempelbeskrivelse
Indsæt noget efter indholdet af hvert <p>-element
Eksempel
p::before
Eksempelbeskrivelse
Indsæt noget før indholdet af hvert <p>-element
Eksempel
p::first-letter
Eksempelbeskrivelse
Vælger det første bogstav i hvert <p>-element
Eksempel
p::first-line
Eksempelbeskrivelse
Vælger den første linje i hvert <p>-element
Eksempel
::marker
Eksempelbeskrivelse
Vælger markørerne for listeelementer
Eksempel
p::selection
Eksempelbeskrivelse
Vælger den del af et element, der er valgt af en bruger
Eksempel
a:active
Eksempelbeskrivelse
Vælger det aktive link
Eksempel
input:checked
Eksempelbeskrivelse
Vælger hvert markeret <input>-element
Eksempel
input:disabled
Eksempelbeskrivelse
Vælger alle deaktiverede <input>-elementer
Eksempel
p:empty
Eksempelbeskrivelse
Vælger hvert <p>-element, der ikke har underordnede
Eksempel
input:enabled
Eksempelbeskrivelse
Vælger alle aktiverede <input>-elementer
Eksempel
p:first-child
Eksempelbeskrivelse
Vælger hvert <p>-element, der er det første underordnede af dets overordnede
Eksempel
p:first-of-type
Eksempelbeskrivelse
Vælger hvert <p>-element, der er det første <p>-element i dets overordnede element
Eksempel
input:focus
Eksempelbeskrivelse
Vælger <input>-elementet, der har fokus
Eksempel
a:hover
Eksempelbeskrivelse
Vælger links på musen over
Eksempel
input:in-range
Eksempelbeskrivelse
Vælger <input>-elementer med en værdi inden for et specificeret område
Eksempel
input:invalid
Eksempelbeskrivelse
Vælger alle <input>-elementer med en ugyldig værdi
Eksempel
p:lang(it)
Eksempelbeskrivelse
Vælger hvert <p>-element med en lang-attributværdi, der starter med "it"
Eksempel
p:last-child
Eksempelbeskrivelse
Vælger hvert <p>-element, der er det sidste underordnede af dets overordnede
Eksempel
p:last-of-type
Eksempelbeskrivelse
Vælger hvert <p>-element, der er det sidste <p>-element i dets overordnede element
Eksempel
a:link
Eksempelbeskrivelse
Vælger alle ubesøgte links
Eksempel
:not(p)
Eksempelbeskrivelse
Vælger hvert element, der ikke er et <p>-element
Eksempel
p:nth-child(2)
Eksempelbeskrivelse
Vælger hvert <p>-element, der er det andet underordnede af dets overordnede
Eksempel
p:nth-last-child(2)
Eksempelbeskrivelse
Vælger hvert <p>-element, der er det andet underordnede underordnede element, tæller fra det sidste underordnede element
Eksempel
p:nth-last-of-type(2)
Eksempelbeskrivelse
Vælger hvert <p>-element, der er det andet <p>-element i dets overordnede element, tæller fra det sidste underordnede element
Eksempel
p:nth-of-type(2)
Eksempelbeskrivelse
Vælger hvert <p>-element, der er det andet <p>-element i dets overordnede element
Eksempel
p:only-of-type
Eksempelbeskrivelse
Vælger hvert <p>-element, der er det eneste <p>-element i dets overordnede element
Eksempel
p:only-child
Eksempelbeskrivelse
Vælger hvert <p>-element, der er det eneste underordnede til dets forælder
Eksempel
input:optional
Eksempelbeskrivelse
Vælger <input>-elementer uden "påkrævet" attribut
Eksempel
input:out-of-range
Eksempelbeskrivelse
Vælger <input>-elementer med en værdi uden for et specificeret interval
Eksempel
input:read-only
Eksempelbeskrivelse
Vælger <input>-elementer med en "skrivebeskyttet"-attribut angivet
Eksempel
input:read-write
Eksempelbeskrivelse
Vælger <input>-elementer uden "skrivebeskyttet"-attribut
Eksempel
input:required
Eksempelbeskrivelse
Vælger <input>-elementer med en specificeret "påkrævet" attribut
Eksempel
root
Eksempelbeskrivelse
Vælger dokumentets rodelement
Eksempel
#news:target
Eksempelbeskrivelse
Vælger det aktuelle aktive #nyhedselement (klikket på en URL, der indeholder det pågældende ankernavn)
Eksempel
input:valid
Eksempelbeskrivelse
Vælger alle <input>-elementer med en gyldig værdi
Eksempel
a:visited
Eksempelbeskrivelse
Vælger alle besøgte links