Pseudo-třídy jsou speciální klíčová slova, která se přidávají k selektorům, aby se vybral element, který je ve specifickém stavu. To umožňuje stylovat elementy na základě uživatelských interakcí (např. najetí myší, kliknutí) nebo jejich pozice ve stromu dokumentu.
Syntaxe je selektor:pseudo-třída { vlastnosti; }.
Jedny z nejčastěji používaných pseudo-tříd jsou pro hypertextové odkazy, které mění svůj vzhled v závislosti na jejich stavu:
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: green;
}button:hover {
background-color: #2980b9;
cursor: pointer; /* Změní kurzor na ruku */
}
input:focus {
border-color: #2ecc71;
box-shadow: 0 0 5px rgba(46, 204, 113, 0.5);
}Tyto pseudo-třídy vybírají elementy na základě jejich pozice v DOM (Document Object Model) stromu.
li:first-child {
font-weight: bold;
}
li:nth-child(odd) {
background-color: #f2f2f2; /* Střídavé barvy pro liché položky */
}
button:not(.disabled) {
background-color: green;
}