Pseudotřídy CSS

Obsah

    Zobrazit obsah

Co jsou Pseudotřídy?

Pseudotřída se používá k definování speciálního stavu prvku.

Lze jej například použít k:

  • Upravte styl prvku, když na něj uživatel přejede myší

  • Styl navštívených a nenavštívených odkazů se liší

  • Upravte styl prvku, když se zaostří

Mouse Over Me

Syntax

Syntaxe pseudotříd:

selector:pseudo-class {
  property: value;
}

Ukotvení Pseudotřídy

Odkazy lze zobrazit různými způsoby:

Příklad

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

Zkuste to sami →

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

Poznámka: a:hover MUSÍ následovat za a:link a a:visited v definici CSS, aby byla účinná! a:active MUSÍ následovat a:hover v definici CSS, aby byla účinná! Názvy pseudotříd nerozlišují velká a malá písmena.

Pseudotřídy a HTML třídy

Pseudotřídy lze kombinovat s HTML třídami:

Když umístíte ukazatel myši na odkaz v příkladu, změní se barva:

Příklad

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

Zkuste to sami →

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

Umístěte ukazatel myši na <div>

Příklad použití pseudotřídy :hover na prvku <div>:

Příklad

div:hover {
  background-color: blue;
}

Zkuste to sami →

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

Jednoduchá nápověda po přejetí myší

Umístěním ukazatele myši na prvek <div> zobrazíte prvek <p> (jako popisek):

Tada! Tady jsem!

Příklad

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

div:hover p {
  display: block;
}

Zkuste to sami →

<!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 - Pseudotřída :first-child

Pseudotřída :first-child odpovídá zadanému prvku, který je prvním potomkem jiného prvku.

Shodujte se s prvním prvkem <p>

V následujícím příkladu selektor odpovídá libovolnému prvku <p>, který je prvním potomkem libovolného prvku:

Příklad

p:first-child
{
   
color: blue;
}

Zkuste to sami →

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

Porovnejte první prvek <i> ve všech prvcích <p>

V následujícím příkladu se selektor shoduje s prvním prvkem <i> ve všech prvcích <p>:

Příklad

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

Zkuste to sami →

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

Porovnejte všechny prvky <i> ve všech prvních podřízených prvcích <p>

V následujícím příkladu selektor odpovídá všem prvkům <i> v prvcích <p>, které jsou prvním potomkem jiného prvku:

Příklad

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

Zkuste to sami →

<!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 - Pseudotřída :lang

Pseudotřída :lang umožňuje definovat speciální pravidla pro různé jazyky.

V níže uvedeném příkladu :lang definuje uvozovky pro prvky s lang="no":

Příklad

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

Zkuste to sami →

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

Další příklady

Přidejte různé styly do hypertextových odkazů

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

Použití :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>

Všechny Pseudo třídy CSS

:active

Příklad:

a:active

Příklad popisu:

Vybere aktivní odkaz

:checked

Příklad:

input:checked

Příklad popisu:

Vybere každý zaškrtnutý prvek <input>

:disabled

Příklad:

input:disabled

Příklad popisu:

Vybere každý zakázaný prvek <input>

:empty

Příklad:

p:empty

Příklad popisu:

Vybere každý prvek <p>, který nemá žádné potomky

:enabled

Příklad:

input:enabled

Příklad popisu:

Vybere každý povolený prvek <input>

:first-child

Příklad:

p:first-child

Příklad popisu:

Vybere všechny prvky <p>, které jsou prvním potomkem svého rodiče

:first-of-type

Příklad:

p:first-of-type

Příklad popisu:

Vybere každý prvek <p>, který je prvním prvkem <p> jeho rodiče

:focus

Příklad:

input:focus

Příklad popisu:

Vybere prvek <input>, který má fokus

:hover

Příklad:

a:hover

Příklad popisu:

Vybírá odkazy na myši

:in-range

Příklad:

input:in-range

Příklad popisu:

Vybere prvky <input> s hodnotou v určeném rozsahu

:invalid

Příklad:

input:invalid

Příklad popisu:

Vybere všechny prvky <input> s neplatnou hodnotou

:lang(language)

Příklad:

p:lang(it)

Příklad popisu:

Vybere každý prvek <p> s hodnotou atributu lang začínající „it“

:last-child

Příklad:

p:last-child

Příklad popisu:

Vybere všechny prvky <p>, které jsou posledním potomkem svého rodiče

:last-of-type

Příklad:

p:last-of-type

Příklad popisu:

Vybere každý prvek <p>, který je posledním prvkem <p> jeho rodiče

:link

Příklad:

a:link

Příklad popisu:

Vybere všechny nenavštívené odkazy

:not(selector)

Příklad:

:not(p)

Příklad popisu:

Vybere každý prvek, který není prvkem <p>

:nth-child(n)

Příklad:

p:nth-child(2)

Příklad popisu:

Vybere každý prvek <p>, který je druhým potomkem svého rodiče

:nth-last-child(n)

Příklad:

p:nth-last-child(2)

Příklad popisu:

Vybere každý prvek <p>, který je druhým potomkem svého rodiče, počítáno od posledního potomka

:nth-last-of-type(n)

Příklad:

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

Příklad popisu:

Vybere každý prvek <p>, který je druhým prvkem <p> jeho rodiče, počítáno od posledního potomka

:nth-of-type(n)

Příklad:

p:nth-of-type(2)

Příklad popisu:

Vybere každý prvek <p>, který je druhým prvkem <p> svého rodiče

:only-of-type

Příklad:

p:only-of-type

Příklad popisu:

Vybere každý prvek <p>, který je jediným prvkem <p> jeho rodiče

:only-child

Příklad:

p:only-child

Příklad popisu:

Vybere každý prvek <p>, který je jediným potomkem svého rodiče

:optional

Příklad:

input:optional

Příklad popisu:

Vybere prvky <input> bez atributu „required“.

:out-of-range

Příklad:

input:out-of-range

Příklad popisu:

Vybere prvky <input> s hodnotou mimo zadaný rozsah

:read-only

Příklad:

input:read-only

Příklad popisu:

Vybere prvky <input> se zadaným atributem "pouze pro čtení".

:read-write

Příklad:

input:read-write

Příklad popisu:

Vybere prvky <input> bez atributu „pouze pro čtení“.

:required

Příklad:

input:required

Příklad popisu:

Vybere prvky <input> se zadaným atributem "required".

:root

Příklad:

root

Příklad popisu:

Vybere kořenový prvek dokumentu

:target

Příklad:

#news:target

Příklad popisu:

Vybere aktuální aktivní prvek #news (kliknutí na adresu URL obsahující tento název kotvy)

:valid

Příklad:

input:valid

Příklad popisu:

Vybere všechny prvky <input> s platnou hodnotou

:visited

Příklad:

a:visited

Příklad popisu:

Vybere všechny navštívené odkazy

Všechny Pseudo prvky CSS

::after

Příklad:

p::after

Příklad popisu:

Vložte obsah za každý prvek <p>

::before

Příklad:

p::before

Příklad popisu:

Vložte obsah před každý prvek <p>

::first-letter

Příklad:

p::first-letter

Příklad popisu:

Vybere první písmeno každého prvku <p>

::first-line

Příklad:

p::first-line

Příklad popisu:

Vybere první řádek každého prvku <p>

::marker

Příklad:

::marker

Příklad popisu:

Vybírá značky položek seznamu

::selection

Příklad:

p::selection

Příklad popisu:

Vybere část prvku, která je vybrána uživatelem