HomeHelpCSS

CSS - Cascading Style Sheets

Pseudo-elementy a pseudo-třídy

Vlastnosti CSS: pseudo-elementy a pseudo-třídy
Definice CSS Význam Příklady

Pseudo-elementy

:first-line stylování prvního řádku elementu p:first-line {text-transform: uppercase;}
:first-letter stylování prvního znaku elementu p:first-letter {font-size: 200%; font-style: italic; font-weight: bold; float: left;}
:before | :after vkládají znaky před, resp. za obsah elementu Př.1: h1:before {content: counter(chapno, upper-roman) ". "}
    Př.2: p.special:before {content: "Special! ";}
p.special:first-letter {color: #ffd800;}

Pseudo-třídy

:link vlastnosti nenavštíveného odkazu a:link {margin: -0.5ex; border: none; padding: 0.5ex; text-decoration: underline;}
:visited vlastnosti navštíveného odkazu a:visited {color: #808000;}
:focus vlastnosti při označení pomocí klávesnice Je možná i takováto definice:
a:focus {background: yellow;}
a:focus:hover {background: white;}
:hover vlastnosti při najetí kurzorem nad element a:hover {color: #fff; background-color: #008; text-decoration: none;}
:active vlastnosti právě při kliknutí a:active {color: #f00; background-color: #fff;}

Od CSS 2 lze pseudo-třídu :hover použít na jakýkoli element.