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
Syntaxen för pseudoklasser:
selector:pseudo-class {
property: value;
}
Länkar kan visas på olika sätt:
/* 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 kan kombineras med HTML-klasser:
När du håller muspekaren över länken i exemplet kommer den att ändra färg:
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>
Ett exempel på att använda pseudoklassen :hover
på ett <div>-element:
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>
Håll muspekaren över ett <div>-element för att visa ett <p>-element (som ett verktygstips):
Tada! Här är jag!
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>
Pseudoklassen :first-child
matchar ett specificerat element som är det första barnet till ett annat element.
I följande exempel matchar väljaren alla <p>-element som är det första underordnade elementet:
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>
I följande exempel matchar väljaren det första <i>-elementet i alla <p>-element:
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>
I följande exempel matchar väljaren alla <i>-element i <p>-element som är det första barnet till ett annat element:
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>
Pseudoklassen :lang
låter dig definiera specialregler för olika språk.
I exemplet nedan definierar :lang
citattecken för -element med lang="no":
<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>
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>
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
Exempel:
p::after
Exempelbeskrivning:
Infoga innehåll efter varje <p>-element
Exempel:
p::before
Exempelbeskrivning:
Infoga innehåll före 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