Aplikují se na neexistující prvky či jejich vlastnosti, která je dána typem pseudotřídy.
x:link - každý prvek X, který je odkazem, jehož cíl ještě nebyl navštíven
x:visited - každý prvek X, který je odkazem, jehož cíl již byl navštíven
x:lang ( c ) - každý prvek X, který má přirozený jazyk c (způsob určení přirozeného jazyka c specifikuje značkový jazyk dokumentu)
x:first-child - každý prvek X, který je prvním potomkem nějakého jiného prvku (prvním potomkem svého rodiče)
x:hover - každý prvek X, přes nějž právě přechází kurzor
x:active - každý prvek X, který byl právě vybrán
x:focus - každý prvek X, který má právě focus
p:first-line – určení stylu 1. řádky v odstavci
p:first-letter – určení stylu 1. písmene v odstavci
x:before – přidá text před prvek X
x:after – přidá text za prvek X
Pozn: :before a :after se nejčastěji používají v kombinaci s funkcí content . Zatím nejsou zcela podporovány všemi prohlížeči.
Příklad:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title> </title>
<style>
IMG:after { content: attr(alt) }
.poznamka:before {
content: "Poznámka: ";
font-weight: bold;
}
</style>
</head>
<body>
<p class="poznamka"> Ne všichni klienti to podporují. </p>
<img src="MOUSE.GIF" alt="moje milá myšička">
</body>
</html>
Ukázka zde
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title> </title>
<style type="text/css">
<!--
body, p, ul, li,div {margin:0;padding:0}
p {margin-left:10px;margin-right:10px;margin-bottom:20px;width:50%;font-size:15pt}
p b {font-weight:100;font-style:italic}
p:hover {border:10px dotted orange}
p:hover b {font-weight:bold}
//-->
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetuer commodo tellus laoreet quis Praesent. Ipsum in eget augue molestie justo amet sociis et vitae Vestibulum. Nulla id eros magna eget at at ipsum odio interdum vel. Curabitur Aenean tincidunt Vivamus urna ligula convallis fames nec at wisi. Mi Nam Curabitur sed Sed Vestibulum egestas malesuada ac Sed Nulla. Id tincidunt vestibulum vitae nunc. </p>
<p>Ornare habitant <b>natoque habitant orci Curabitur accumsan </b>id id senectus nibh. Elit Cras nisl a Nulla Pellentesque ut id lacinia Vestibulum facilisis. Nullam sagittis orci Aenean Curabitur faucibus metus Curabitur rutrum eu Cum. Felis orci Duis nulla tempus pellentesque pretium convallis Curabitur lacinia elit. Wisi dapibus ac id a mus Ut convallis habitasse In sem. Quam enim elit tristique senectus Quisque Proin ut rhoncus. </p>
<p>Proin pellentesque enim convallis neque ac turpis tristique at ut semper. At ligula convallis libero felis eget nunc wisi vitae Mauris dapibus. Wisi vel augue orci eget metus elit leo turpis Pellentesque ridiculus. Urna lorem laoreet est elit porttitor Pellentesque nibh nulla adipiscing natoque. Feugiat est In dapibus laoreet eros elit ridiculus cursus pede mus. Vitae et Morbi quis tellus nulla leo montes a lacus. </p>
<p>Maecenas justo tincidunt consequat tincidunt Ut vel interdum orci porttitor neque. Ridiculus congue Phasellus nascetur ut semper Vestibulum laoreet In lacinia Donec. Eu eros felis laoreet nunc a ut Morbi quis Sed dolor. Sapien condimentum arcu Sed vel Phasellus convallis egestas scelerisque Vestibulum id. Vitae malesuada lorem lacus amet sem Pellentesque et at wisi Nam. Interdum justo parturient justo risus Quisque sit ac vitae Curabitur platea. Habitant a feugiat. </p>
</body>
</html>
