CSS Pseudo-element


Innehållsförteckning

    Visa innehållsförteckning


Vad är Pseudo-element?

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


Syntax

Syntaxen för pseudoelement:

selector::pseudo-element {
  property: value;
}

::första radens Pseudo-element

::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:

Exempel

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.



::första bokstavens Pseudo-element

::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:

Exempel

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 och HTML-klasser

Pseudo-element kan kombineras med HTML-klasser:

Exempel

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 pseudo-element

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:

Exempel

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>



CSS - ::before Pseudo-elementet

::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:

Exempel

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>



CSS - ::after Pseudo-elementet

::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:

Exempel

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>



CSS - ::markörens Pseudo-element

::marker pseudo-elementet väljer markörer för listobjekt.

Följande exempel formaterar markörerna för listobjekt:

Exempel

::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>



CSS - ::selection Pseudo-elementet

::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:

Exempel

::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>




Alla CSS Pseudo Elements

::after

Exempel

p::after

Exempelbeskrivning

Infoga något efter innehållet i varje <p>-element

::before

Exempel

p::before

Exempelbeskrivning

Infoga något före innehållet i varje <p>-element

::first-letter

Exempel

p::first-letter

Exempelbeskrivning

Väljer den första bokstaven i varje <p>-element

::first-line

Exempel

p::first-line

Exempelbeskrivning

Väljer den första raden i varje <p>-element

::marker

Exempel

::marker

Exempelbeskrivning

Väljer markörer för listobjekt

::selection

Exempel

p::selection

Exempelbeskrivning

Väljer den del av ett element som väljs av en användare

Alla CSS-pseudoklasser

:active

Exempel

a:active

Exempelbeskrivning

Väljer den aktiva länken

:checked

Exempel

input:checked

Exempelbeskrivning

Väljer alla markerade <input>-element

:disabled

Exempel

input:disabled

Exempelbeskrivning

Väljer alla inaktiverade <input>-element

:empty

Exempel

p:empty

Exempelbeskrivning

Väljer alla <p>-element som inte har några underordnade

:enabled

Exempel

input:enabled

Exempelbeskrivning

Väljer alla aktiverade <input>-element

:first-child

Exempel

p:first-child

Exempelbeskrivning

Väljer alla <p>-element som är det första barnet till dess förälder

:first-of-type

Exempel

p:first-of-type

Exempelbeskrivning

Väljer varje <p>-element som är det första <p>-elementet i dess överordnade element

:focus

Exempel

input:focus

Exempelbeskrivning

Väljer <input>-elementet som har fokus

:hover

Exempel

a:hover

Exempelbeskrivning

Väljer länkar på musen över

:in-range

Exempel

input:in-range

Exempelbeskrivning

Väljer <input>-element med ett värde inom ett specificerat intervall

:invalid

Exempel

input:invalid

Exempelbeskrivning

Väljer alla <input>-element med ett ogiltigt värde

:lang(language)

Exempel

p:lang(it)

Exempelbeskrivning

Väljer varje <p>-element med ett lang-attributvärde som börjar med "it"

:last-child

Exempel

p:last-child

Exempelbeskrivning

Väljer alla <p>-element som är det sista underordnade till dess förälder

:last-of-type

Exempel

p:last-of-type

Exempelbeskrivning

Väljer varje <p>-element som är det sista <p>-elementet i dess överordnade element

:link

Exempel

a:link

Exempelbeskrivning

Markerar alla obesökta länkar

:not(selector)

Exempel

:not(p)

Exempelbeskrivning

Väljer alla element som inte är ett <p>-element

:nth-child(n)

Exempel

p:nth-child(2)

Exempelbeskrivning

Väljer varje <p>-element som är det andra underordnade till dess förälder

:nth-last-child(n)

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

:nth-last-of-type(n)

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

:nth-of-type(n)

Exempel

p:nth-of-type(2)

Exempelbeskrivning

Väljer varje <p>-element som är det andra <p>-elementet till dess överordnade

:only-of-type

Exempel

p:only-of-type

Exempelbeskrivning

Väljer varje <p>-element som är det enda <p>-elementet i dess överordnade element

:only-child

Exempel

p:only-child

Exempelbeskrivning

Väljer varje <p>-element som är det enda underordnade till dess förälder

:optional

Exempel

input:optional

Exempelbeskrivning

Väljer <input> element utan "required" attribut

:out-of-range

Exempel

input:out-of-range

Exempelbeskrivning

Väljer <input>-element med ett värde utanför ett specificerat intervall

:read-only

Exempel

input:read-only

Exempelbeskrivning

Väljer <input>-element med ett "skrivskyddat"-attribut specificerat

:read-write

Exempel

input:read-write

Exempelbeskrivning

Väljer <input>-element utan "skrivskyddad"-attribut

:required

Exempel

input:required

Exempelbeskrivning

Väljer <input>-element med ett "required"-attribut specificerat

:root

Exempel

root

Exempelbeskrivning

Väljer dokumentets rotelement

:target

Exempel

#news:target

Exempelbeskrivning

Väljer det aktuella aktiva #nyhetselementet (klickade på en URL som innehåller det ankarnamnet)

:valid

Exempel

input:valid

Exempelbeskrivning

Väljer alla <input>-element med ett giltigt värde

:visited

Exempel

a:visited

Exempelbeskrivning

Väljer alla besökta länkar