CSS Pseudo-klasser

Indholdsfortegnelse

    Vis indholdsfortegnelse

Hvad er Pseudo-klasser?

En pseudo-klasse bruges til at definere en speciel tilstand af et element.

Det kan for eksempel bruges til at:

  • Style et element, når en bruger bevæger musen hen over det

  • Stil besøgte og ubesøgte links forskelligt

  • Style et element, når det får fokus

Mouse Over Me

Syntaks

Syntaksen for pseudoklasser:

selector:pseudo-class {
  property: value;
}

Anker Pseudo-klasser

Links kan vises på forskellige måder:

Eksempel

  /* 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;
}

Prøv det selv →

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

Bemærk: a:hover SKAL komme efter a:link og a:visited i CSS-definitionen for at være effektiv! a:active SKAL komme efter a:hover i CSS-definitionen for at være effektiv! Pseudoklassenavne skelner ikke mellem store og små bogstaver.

Pseudo-klasser og HTML-klasser

Pseudo-klasser kan kombineres med HTML-klasser:

Når du holder markøren over linket i eksemplet, skifter det farve:

Eksempel

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

Prøv det selv →

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

Hold musen over <div>

Et eksempel på brug af :hover pseudoklassen på et <div>-element:

Eksempel

div:hover {
  background-color: blue;
}

Prøv det selv →

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

Simpelt værktøjstip-hover

Hold markøren over et <div>-element for at vise et <p>-element (som et værktøjstip):

Tada! Her er jeg!

Eksempel

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

div:hover p {
  display: block;
}

Prøv det selv →

<!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 - :first-child Pseudo-klassen

:first-child pseudoklassen matcher et specificeret element, der er det første underordnede af et andet element.

Match det første <p>-element

I det følgende eksempel matcher vælgeren ethvert <p>-element, der er det første underordnede af ethvert element:

Eksempel

p:first-child
{
   
color: blue;
}

Prøv det selv →

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

Match det første <i>-element i alle <p>-elementer

I det følgende eksempel matcher vælgeren det første <i>-element i alle <p>-elementer:

Eksempel

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

Prøv det selv →

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

Match alle <i>-elementer i alle første underordnede <p>-elementer

I det følgende eksempel matcher vælgeren alle <i>-elementer i <p>-elementer, der er det første underordnede af et andet element:

Eksempel

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

Prøv det selv →

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

:lang pseudoklassen giver dig mulighed for at definere specielle regler for forskellige sprog.

I eksemplet nedenfor definerer :lang anførselstegnene for -elementer med lang="no":

Eksempel

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

Prøv det selv →

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

Flere eksempler

Tilføj forskellige stilarter til hyperlinks

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

Brug af :fokus

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

Alle CSS Pseudo-klasser

:active

Eksempel:

a:active

Eksempelbeskrivelse:

Vælger det aktive link

:checked

Eksempel:

input:checked

Eksempelbeskrivelse:

Vælger hvert markeret <input>-element

:disabled

Eksempel:

input:disabled

Eksempelbeskrivelse:

Vælger alle deaktiverede <input>-elementer

:empty

Eksempel:

p:empty

Eksempelbeskrivelse:

Vælger hvert <p>-element, der ikke har underordnede

:enabled

Eksempel:

input:enabled

Eksempelbeskrivelse:

Vælger alle aktiverede <input>-elementer

:first-child

Eksempel:

p:first-child

Eksempelbeskrivelse:

Vælger hvert <p>-element, der er det første underordnede af dets overordnede

:first-of-type

Eksempel:

p:first-of-type

Eksempelbeskrivelse:

Vælger hvert <p>-element, der er det første <p>-element i dets overordnede element

:focus

Eksempel:

input:focus

Eksempelbeskrivelse:

Vælger <input>-elementet, der har fokus

:hover

Eksempel:

a:hover

Eksempelbeskrivelse:

Vælger links på musen over

:in-range

Eksempel:

input:in-range

Eksempelbeskrivelse:

Vælger <input>-elementer med en værdi inden for et specificeret område

:invalid

Eksempel:

input:invalid

Eksempelbeskrivelse:

Vælger alle <input>-elementer med en ugyldig værdi

:lang(language)

Eksempel:

p:lang(it)

Eksempelbeskrivelse:

Vælger hvert <p>-element med en lang-attributværdi, der starter med "it"

:last-child

Eksempel:

p:last-child

Eksempelbeskrivelse:

Vælger hvert <p>-element, der er det sidste underordnede af dets overordnede

:last-of-type

Eksempel:

p:last-of-type

Eksempelbeskrivelse:

Vælger hvert <p>-element, der er det sidste <p>-element i dets overordnede element

:link

Eksempel:

a:link

Eksempelbeskrivelse:

Vælger alle ubesøgte links

:not(selector)

Eksempel:

:not(p)

Eksempelbeskrivelse:

Vælger hvert element, der ikke er et <p>-element

:nth-child(n)

Eksempel:

p:nth-child(2)

Eksempelbeskrivelse:

Vælger hvert <p>-element, der er det andet underordnede af dets overordnede

:nth-last-child(n)

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

:nth-last-of-type(n)

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

:nth-of-type(n)

Eksempel:

p:nth-of-type(2)

Eksempelbeskrivelse:

Vælger hvert <p>-element, der er det andet <p>-element i dets overordnede element

:only-of-type

Eksempel:

p:only-of-type

Eksempelbeskrivelse:

Vælger hvert <p>-element, der er det eneste <p>-element i dets overordnede element

:only-child

Eksempel:

p:only-child

Eksempelbeskrivelse:

Vælger hvert <p>-element, der er det eneste underordnede til dets forælder

:optional

Eksempel:

input:optional

Eksempelbeskrivelse:

Vælger <input>-elementer uden "påkrævet" attribut

:out-of-range

Eksempel:

input:out-of-range

Eksempelbeskrivelse:

Vælger <input>-elementer med en værdi uden for et specificeret interval

:read-only

Eksempel:

input:read-only

Eksempelbeskrivelse:

Vælger <input>-elementer med en "skrivebeskyttet"-attribut angivet

:read-write

Eksempel:

input:read-write

Eksempelbeskrivelse:

Vælger <input>-elementer uden "skrivebeskyttet"-attribut

:required

Eksempel:

input:required

Eksempelbeskrivelse:

Vælger <input>-elementer med en specificeret "påkrævet" attribut

:root

Eksempel:

root

Eksempelbeskrivelse:

Vælger dokumentets rodelement

:target

Eksempel:

#news:target

Eksempelbeskrivelse:

Vælger det aktuelle aktive #nyhedselement (klikket på en URL, der indeholder det pågældende ankernavn)

:valid

Eksempel:

input:valid

Eksempelbeskrivelse:

Vælger alle <input>-elementer med en gyldig værdi

:visited

Eksempel:

a:visited

Eksempelbeskrivelse:

Vælger alle besøgte links

Alle CSS Pseudo Elements

::after

Eksempel:

p::after

Eksempelbeskrivelse:

Indsæt indhold efter hvert <p>-element

::before

Eksempel:

p::before

Eksempelbeskrivelse:

Indsæt indhold før hvert <p>-element

::first-letter

Eksempel:

p::first-letter

Eksempelbeskrivelse:

Vælger det første bogstav i hvert <p>-element

::first-line

Eksempel:

p::first-line

Eksempelbeskrivelse:

Vælger den første linje i hvert <p>-element

::marker

Eksempel:

::marker

Eksempelbeskrivelse:

Vælger markørerne for listeelementer

::selection

Eksempel:

p::selection

Eksempelbeskrivelse:

Vælger den del af et element, der er valgt af en bruger