CSS Pseudo-klasser


Innehållsförteckning

    Visa innehållsförteckning


Vad är Pseudo-klasser?

En pseudoklass används för att definiera ett speciellt tillstånd av ett element.

Den kan till exempel användas för att:

  • Stil ett element när en användare för muspekaren över det

  • Stil besökta och obesökta länkar olika

  • Style ett element när det får fokus

Mouse Over Me


Syntax

Syntaxen för pseudoklasser:

selector:pseudo-class {
  property: value;
}

Ankare Pseudo-klasser

Länkar kan visas på olika sätt:

Exempel

  /* unvisited link */
a:link {
  color: #FF0000;
}
/* visited 
link */
a:visited {
  color: #00FF00;
}
/* mouse over link */
a:hover {
  color: #FF00FF;
}
/* selected link */
a:active {
  color: #0000FF;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<h2>Styling a link depending on state</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>


Obs! a:hover MÅSTE komma efter a:link och a:visited i CSS-definitionen för att vara effektiv! a:active MÅSTE komma efter a:hover i CSS-definitionen för att vara effektiv! Pseudoklassnamn är inte skiftlägeskänsliga.



Pseudo-klasser och HTML-klasser

Pseudo-klasser kan kombineras med HTML-klasser:

När du håller muspekaren över länken i exemplet kommer den att ändra färg:

Exempel

a.highlight:hover {
  color: #ff0000;
} 

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
  color: #ff0000;
  font-size: 22px;
} 
</style>
</head>
<body>

<h2>Pseudo-classes and HTML Classes</h2>

<p>When you hover over the first link below, it will change color and font size:</p>

<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>

<p><a href="default.asp">CSS Tutorial</a></p>

</body>
</html>



Håll muspekaren över <div>

Ett exempel på att använda pseudoklassen :hover på ett <div>-element:

Exempel

div:hover {
  background-color: blue;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
  color: white;
  padding: 25px;
  text-align: center;
}

div:hover {
  background-color: blue;
}
</style>
</head>
<body>

<p>Mouse over the div element below to change its background color:</p>

<div>Mouse Over Me</div>

</body>
</html>



Enkelt verktygstips

Håll muspekaren över ett <div>-element för att visa ett <p>-element (som ett verktygstips):

Tada! Här är jag!

Exempel

p {
  display: none;
  
background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}
</style>
</head>
<body>

<div>Hover over this div element to show the p element
  <p>Tada! Here I am!</p>
</div>

</body>
</html>



CSS - Pseudoklassen :första barn

Pseudoklassen :first-child matchar ett specificerat element som är det första barnet till ett annat element.

Matcha det första <p>-elementet

I följande exempel matchar väljaren alla <p>-element som är det första underordnade elementet:

Exempel

p:first-child
{
   
color: blue;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>This is some text.</p>
<p>This is some text.</p>

<div>
  <p>This is some text.</p>
  <p>This is some text.</p>
</div>

</body>
</html>



Matcha det första <i>-elementet i alla <p>-element

I följande exempel matchar väljaren det första <i>-elementet i alla <p>-element:

Exempel

p i:first-child
{
   
color: blue;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

</body>
</html>



Matcha alla <i>-element i alla första underordnade <p>-element

I följande exempel matchar väljaren alla <i>-element i <p>-element som är det första barnet till ett annat element:

Exempel

p:first-child i
{
  color: blue;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
  color: blue;
} 
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

<div>
  <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
  <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
</div>

</body>
</html>



CSS - :lang Pseudo-klassen

Pseudoklassen :lang låter dig definiera specialregler för olika språk.

I exemplet nedan definierar :lang citattecken för -element med lang="no":

Exempel

<html>
<head>
<style>
  q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> 
Some text.</p>

</body>
</html>

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>In this example, :lang defines the quotation marks for q elements with lang="no":</p>

</body>
</html>



Fler exempel

Lägg till olika stilar till hyperlänkar

<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>

<h2>Styling Links</h2>

<p>Mouse over the links and watch them change layout:</p>

<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>

</body>
</html>


Användning av :focus

<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
  background-color: yellow;
}
</style>
</head>
<body>

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>




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

Alla CSS Pseudo Elements

::after

Exempel:

p::after

Exempelbeskrivning:

Infoga innehåll efter varje <p>-element

::before

Exempel:

p::before	

Exempelbeskrivning:

Infoga innehåll före 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