CSS-Pseudoklassen

Inhaltsverzeichnis

Inhaltsverzeichnis anzeigen

Was sind Pseudoklassen?

Eine Pseudoklasse wird verwendet, um einen speziellen Zustand zu definieren eines Elements.

Es kann beispielsweise verwendet werden, um:

Gestalten Sie ein Element, wenn ein Benutzer mit der Maus darüber fährt
Gestalten Sie besuchte und nicht besuchte Links unterschiedlich
Gestalten Sie ein Element, wenn es den Fokus erhält

Mouse Over Me

Syntax

Die Syntax von Pseudoklassen:

selector:pseudo-class {
  property: value;
}

Anker-Pseudoklassen

Links können auf unterschiedliche Weise angezeigt werden:

Beispiel

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

Probieren Sie es selbst aus →

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

Hinweis: a:hover MUSS nach a:link und kommen a:visited in der CSS-Definition, um wirksam zu sein! a:active MUSS danach kommen a:hover in der CSS-Definition, um effektiv zu sein! Bei Pseudoklassennamen wird die Groß-/Kleinschreibung nicht beachtet.

Pseudoklassen und HTML-Klassen

Pseudoklassen können mit HTML-Klassen kombiniert werden:

Wenn Sie mit der Maus über den Link im Beispiel fahren, ändert sich seine Farbe:

Beispiel

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

Probieren Sie es selbst aus →

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

Bewegen Sie den Mauszeiger über <div>

Ein Beispiel für die Verwendung der Pseudoklasse :hover für ein <div>-Element:

Beispiel

div:hover {
  background-color: blue;
}

Probieren Sie es selbst aus →

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

Einfacher Tooltip-Hover

Bewegen Sie den Mauszeiger über ein <div>-Element, um ein <p>-Element anzuzeigen (wie einen Tooltip):

Tada! Hier bin ich!

Beispiel

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

div:hover p {
  display: block;
}

Probieren Sie es selbst aus →

<!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 - Die :first-child-Pseudoklasse

Die Pseudoklasse :first-child stimmt mit einem angegebenen Element überein, das das erste untergeordnete Element eines anderen Elements ist.

Entspricht dem ersten <p>-Element

Im folgenden Beispiel stimmt der Selektor mit jedem <p>-Element überein, das das erste untergeordnete Element eines beliebigen Elements ist:

Beispiel

p:first-child
{
   
color: blue;
}

Probieren Sie es selbst aus →

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

Entspricht dem ersten <i>-Element in allen <p>-Elementen

Im folgenden Beispiel stimmt der Selektor mit dem ersten <i>-Element in allen <p>-Elementen überein:

Beispiel

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

Probieren Sie es selbst aus →

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

Passt alle <i>-Elemente in allen ersten untergeordneten <p>-Elementen an

Im folgenden Beispiel stimmt der Selektor mit allen <i>-Elementen in <p>-Elementen überein, die das erste untergeordnete Element eines anderen Elements sind:

Beispiel

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

Probieren Sie es selbst aus →

<!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 - Die :lang-Pseudoklasse

Mit der Pseudoklasse :lang können Sie spezielle Regeln für verschiedene Sprachen definieren.

Im folgenden Beispiel definiert :lang die Anführungszeichen für -Elemente mit lang="no":

Beispiel

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

Probieren Sie es selbst aus →

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

Mehr Beispiele

Fügen Sie Hyperlinks verschiedene Stile hinzu

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

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

Alle CSS-Pseudoklassen

:active

Beispiel:

a:active

Beispielbeschreibung:

Wählt den aktiven Link aus

:checked

Beispiel:

input:checked

Beispielbeschreibung:

Wählt jedes aktivierte <input>-Element aus

:disabled

Beispiel:

input:disabled

Beispielbeschreibung:

Wählt jedes deaktivierte <input>-Element aus

:empty

Beispiel:

p:empty

Beispielbeschreibung:

Wählt jedes <p>-Element aus, das keine untergeordneten Elemente hat

:enabled

Beispiel:

input:enabled

Beispielbeschreibung:

Wählt jedes aktivierte <input>-Element aus

:first-child

Beispiel:

p:first-child

Beispielbeschreibung:

Wählt jedes <p>-Element aus, das das erste untergeordnete Element seines übergeordneten Elements ist

:first-of-type

Beispiel:

p:first-of-type

Beispielbeschreibung:

Wählt jedes <p>-Element aus, das das erste <p>-Element seines übergeordneten Elements ist

:focus

Beispiel:

input:focus

Beispielbeschreibung:

Wählt das <input>-Element aus, das den Fokus hat

:hover

Beispiel:

a:hover

Beispielbeschreibung:

Wählt Links beim Überfahren mit der Maus aus

:in-range

Beispiel:

input:in-range

Beispielbeschreibung:

Wählt -Elemente mit einem Wert innerhalb eines angegebenen Bereichs aus

:invalid

Beispiel:

input:invalid

Beispielbeschreibung:

Wählt alle <input>-Elemente mit einem ungültigen Wert aus

:lang(language)

Beispiel:

p:lang(it)

Beispielbeschreibung:

Wählt jedes <p>-Element mit einem lang-Attributwert aus, der mit „it“ beginnt.

:last-child

Beispiel:

p:last-child

Beispielbeschreibung:

Wählt jedes <p>-Element aus, das das letzte untergeordnete Element seines übergeordneten Elements ist

:last-of-type

Beispiel:

p:last-of-type

Beispielbeschreibung:

Wählt jedes <p>-Element aus, das das letzte <p>-Element seines übergeordneten Elements ist

:link

Beispiel:

a:link

Beispielbeschreibung:

Wählt alle nicht besuchten Links aus

:not(selector)

Beispiel:

:not(p)

Beispielbeschreibung:

Wählt jedes Element aus, das kein <p>-Element ist

:nth-child(n)

Beispiel:

p:nth-child(2)

Beispielbeschreibung:

Wählt jedes <p>-Element aus, das das zweite untergeordnete Element seines übergeordneten Elements ist

:nth-last-child(n)

Beispiel:

p:nth-last-child(2)

Beispielbeschreibung:

Wählt jedes <p>-Element aus, das das zweite untergeordnete Element seines übergeordneten Elements ist, gezählt vom letzten untergeordneten Element

:nth-last-of-type(n)

Beispiel:

p:nth-last-of-type(2)

Beispielbeschreibung:

Wählt jedes <p>-Element aus, das das zweite <p>-Element seines übergeordneten Elements ist, gezählt vom letzten untergeordneten Element

:nth-of-type(n)

Beispiel:

p:nth-of-type(2)

Beispielbeschreibung:

Wählt jedes <p>-Element aus, das das zweite <p>-Element seines übergeordneten Elements ist

:only-of-type

Beispiel:

p:only-of-type

Beispielbeschreibung:

Wählt jedes <p>-Element aus, das das einzige <p>-Element seines übergeordneten Elements ist

:only-child

Beispiel:

p:only-child

Beispielbeschreibung:

Wählt jedes <p>-Element aus, das das einzige untergeordnete Element seines übergeordneten Elements ist

:optional

Beispiel:

input:optional

Beispielbeschreibung:

Wählt <input>-Elemente ohne „erforderliches“ Attribut aus

:out-of-range

Beispiel:

input:out-of-range

Beispielbeschreibung:

Wählt -Elemente mit einem Wert außerhalb eines angegebenen Bereichs aus

:read-only

Beispiel:

input:read-only

Beispielbeschreibung:

Wählt <input>-Elemente mit einem angegebenen „readonly“-Attribut aus

:read-write

Beispiel:

input:read-write

Beispielbeschreibung:

Wählt <input>-Elemente ohne „readonly“-Attribut aus

:required

Beispiel:

input:required

Beispielbeschreibung:

Wählt <input>-Elemente mit einem angegebenen „erforderlichen“ Attribut aus

:root

Beispiel:

root

Beispielbeschreibung:

Wählt das Stammelement des Dokuments aus

:target

Beispiel:

#news:target

Beispielbeschreibung:

Wählt das aktuell aktive #news-Element aus (auf eine URL geklickt, die diesen Ankernamen enthält)

:valid

Beispiel:

input:valid

Beispielbeschreibung:

Wählt alle <input>-Elemente mit einem gültigen Wert aus

:visited

Beispiel:

a:visited

Beispielbeschreibung:

Wählt alle besuchten Links aus

Alle CSS-Pseudoelemente

::after

Beispiel:

p::after

Beispielbeschreibung:

Fügen Sie nach jedem <p>-Element Inhalt ein

::before

Beispiel:

p::before

Beispielbeschreibung:

Fügen Sie vor jedem <p>-Element Inhalt ein

::first-letter

Beispiel:

p::first-letter

Beispielbeschreibung:

Wählt den ersten Buchstaben jedes <p>-Elements aus

::first-line

Beispiel:

p::first-line

Beispielbeschreibung:

Wählt die erste Zeile jedes <p>-Elements aus

::marker

Beispiel:

::marker

Beispielbeschreibung:

Wählt die Markierungen von Listenelementen aus

::selection

Beispiel:

p::selection

Beispielbeschreibung:

Wählt den Teil eines Elements aus, der von einem Benutzer ausgewählt wird

CSS-Pseudoklassen

Inhaltsverzeichnis

Was sind Pseudoklassen?

Syntax

Anker-Pseudoklassen

Beispiel

Pseudoklassen und HTML-Klassen

Beispiel

Bewegen Sie den Mauszeiger über <div>

Beispiel

Einfacher Tooltip-Hover

Beispiel

CSS - Die :first-child-Pseudoklasse

Entspricht dem ersten <p>-Element

Beispiel

Entspricht dem ersten <i>-Element in allen <p>-Elementen

Beispiel

Passt alle <i>-Elemente in allen ersten untergeordneten <p>-Elementen an

Beispiel

CSS - Die :lang-Pseudoklasse

Beispiel

Mehr Beispiele

Alle CSS-Pseudoklassen

:active

:checked

:disabled

:empty

:enabled

:first-child

:first-of-type

:focus

:hover

:in-range

:invalid

:lang(language)

:last-child

:last-of-type

:link

:not(selector)

:nth-child(n)

:nth-last-child(n)

:nth-last-of-type(n)

:nth-of-type(n)

:only-of-type

:only-child

:optional

:out-of-range

:read-only

:read-write

:required

:root

:target

:valid

:visited

Alle CSS-Pseudoelemente

::after

::before

::first-letter

::first-line

::marker

::selection