Ett CSS-pseudoelement används för att utforma specificerade delar av ett element.
Den kan till exempel användas för att:
Stil den första bokstaven, eller raden, i ett element
Infoga innehåll före eller efter innehållet i ett element
Syntaxen för pseudoelement:
selector::pseudo-element {
property: value;
}
::first-line
pseudoelementet används för att lägga till en speciell stil till den första raden i en text.
Följande exempel formaterar den första raden i texten i alla <p> element:
p::first-line
{
color: #ff0000;
font-variant: small-caps;
}
Prova själv →
<!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>
Obs: ::first-line
pseudoelementet kan endast tillämpas på blocknivå element.
Följande egenskaper gäller för ::first-line
pseudoelement:
teckensnittsegenskaper
färgegenskaper
bakgrundsegenskaper
ordmellanrum
teckenavstånd
text-dekoration
vertikaljustera
textomvandling
radavstånd
klar
Lägg märke till den dubbla kolonnotationen - ::first-line
kontra :first-line
Dubbelkolonet ersatte enkelkolonet notation för pseudoelement i CSS3. Detta var ett försök från W3C till skilja mellan pseudo-klasser och pseudo-element.
Singelkolonsyntaxen användes för både pseudoklasser och pseudoelement i CSS2 och CSS1.
För bakåtkompatibilitet är syntaxen med ett kolon acceptabel för CSS2 och CSS1 pseudoelement.
::first-letter
pseudoelementet används för att lägga till en speciell stil till den första bokstaven i en text.
Följande exempel formaterar den första bokstaven i texten i alla <p> element:
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
Prova själv →
<!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>
Obs! Pseudoelementet ::first-letter
kan endast tillämpas på blocknivå element.
Följande egenskaper gäller för pseudoelementet ::första bokstaven:
teckensnittsegenskaper
färgegenskaper
bakgrundsegenskaper
marginalegenskaper
stoppningsegenskaper
gränsfastigheter
text-dekoration
vertikaljustera (endast om "flyta" är "ingen")
textomvandling
radavstånd
flyta
klar
Pseudo-element kan kombineras med HTML-klasser:
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
Prova själv →
<!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>
Exemplet ovan visar den första bokstaven i stycken med class="intro", in röd och i större storlek.
Flera pseudoelement kan också kombineras.
I följande exempel kommer den första bokstaven i ett stycke att vara röd, in en xx-stor teckenstorlek. Resten av den första raden kommer att vara blå och in små bokstäver. Resten av stycket kommer att vara standard teckenstorlek och färg:
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
p::first-line
{
color: #0000ff;
font-variant: small-caps;
}
Prova själv →
<!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 användas för att infoga något innehåll före innehållet i ett element.
Följande exempel infogar en bild före innehållet i varje <h1>-element:
h1::before
{
content: url(smiley.gif);
}
Prova själv →
<!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
pseudoelementet kan användas för att infoga visst innehåll efter innehållet i ett element.
Följande exempel infogar en bild efter innehållet i varje <h1>-element:
h1::after
{
content: url(smiley.gif);
}
Prova själv →
<!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äljer markörer för listobjekt.
Följande exempel formaterar markörerna för listobjekt:
::marker {
color: red;
font-size: 23px;
}
Prova själv →
<!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
pseudoelementet matchar den del av ett element som är valt av en användare.
Följande CSS-egenskaper kan tillämpas på ::selection
: färg
, bakgrund
, markör
och kontur
.
Följande exempel gör den markerade texten röd på en gul bakgrund:
::selection {
color: red;
background: yellow;
}
Prova själv →
<!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>
Exempel
p::after
Exempelbeskrivning
Infoga något efter innehållet i varje <p>-element
Exempel
p::before
Exempelbeskrivning
Infoga något före innehållet i varje <p>-element
Exempel
p::first-letter
Exempelbeskrivning
Väljer den första bokstaven i varje <p>-element
Exempel
p::first-line
Exempelbeskrivning
Väljer den första raden i varje <p>-element
Exempel
::marker
Exempelbeskrivning
Väljer markörer för listobjekt
Exempel
p::selection
Exempelbeskrivning
Väljer den del av ett element som väljs av en användare
Exempel
a:active
Exempelbeskrivning
Väljer den aktiva länken
Exempel
input:checked
Exempelbeskrivning
Väljer alla markerade <input>-element
Exempel
input:disabled
Exempelbeskrivning
Väljer alla inaktiverade <input>-element
Exempel
p:empty
Exempelbeskrivning
Väljer alla <p>-element som inte har några underordnade
Exempel
input:enabled
Exempelbeskrivning
Väljer alla aktiverade <input>-element
Exempel
p:first-child
Exempelbeskrivning
Väljer alla <p>-element som är det första barnet till dess förälder
Exempel
p:first-of-type
Exempelbeskrivning
Väljer varje <p>-element som är det första <p>-elementet i dess överordnade element
Exempel
input:focus
Exempelbeskrivning
Väljer <input>-elementet som har fokus
Exempel
a:hover
Exempelbeskrivning
Väljer länkar på musen över
Exempel
input:in-range
Exempelbeskrivning
Väljer <input>-element med ett värde inom ett specificerat intervall
Exempel
input:invalid
Exempelbeskrivning
Väljer alla <input>-element med ett ogiltigt värde
Exempel
p:lang(it)
Exempelbeskrivning
Väljer varje <p>-element med ett lang-attributvärde som börjar med "it"
Exempel
p:last-child
Exempelbeskrivning
Väljer alla <p>-element som är det sista underordnade till dess förälder
Exempel
p:last-of-type
Exempelbeskrivning
Väljer varje <p>-element som är det sista <p>-elementet i dess överordnade element
Exempel
a:link
Exempelbeskrivning
Markerar alla obesökta länkar
Exempel
:not(p)
Exempelbeskrivning
Väljer alla element som inte är ett <p>-element
Exempel
p:nth-child(2)
Exempelbeskrivning
Väljer varje <p>-element som är det andra underordnade till dess förälder
Exempel
p:nth-last-child(2)
Exempelbeskrivning
Väljer varje <p>-element som är det andra underordnade underordnade elementet, räknat från det sista underordnade elementet
Exempel
p:nth-last-of-type(2)
Exempelbeskrivning
Väljer varje <p>-element som är det andra <p>-elementet till dess överordnade, räknat från det sista underordnade elementet
Exempel
p:nth-of-type(2)
Exempelbeskrivning
Väljer varje <p>-element som är det andra <p>-elementet till dess överordnade
Exempel
p:only-of-type
Exempelbeskrivning
Väljer varje <p>-element som är det enda <p>-elementet i dess överordnade element
Exempel
p:only-child
Exempelbeskrivning
Väljer varje <p>-element som är det enda underordnade till dess förälder
Exempel
input:optional
Exempelbeskrivning
Väljer <input> element utan "required" attribut
Exempel
input:out-of-range
Exempelbeskrivning
Väljer <input>-element med ett värde utanför ett specificerat intervall
Exempel
input:read-only
Exempelbeskrivning
Väljer <input>-element med ett "skrivskyddat"-attribut specificerat
Exempel
input:read-write
Exempelbeskrivning
Väljer <input>-element utan "skrivskyddad"-attribut
Exempel
input:required
Exempelbeskrivning
Väljer <input>-element med ett "required"-attribut specificerat
Exempel
root
Exempelbeskrivning
Väljer dokumentets rotelement
Exempel
#news:target
Exempelbeskrivning
Väljer det aktuella aktiva #nyhetselementet (klickade på en URL som innehåller det ankarnamnet)
Exempel
input:valid
Exempelbeskrivning
Väljer alla <input>-element med ett giltigt värde
Exempel
a:visited
Exempelbeskrivning
Väljer alla besökta länkar