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