V tomto posledním tutoriálu o selektorech vám představím velmi speciální formu selektorů. Jedná se o tzv. pseudotřídy a pseudoelementy. Jedná se o selektory, které se nevztahují k určitým prvkům HTML, ale jsou generovány výstupním zařízením.
S pomocí pseudotříd a pseudoelementů lze definovat deklarace pro části HTML, které nelze jednoznačně popsat jedním prvkem HTML. Typickými příklady jsou například odkaz, který byl právě kliknut, nebo odkaz, který ještě nebyl navštíven.
Úprava odkazů
Velmi často se chceme věnovat úpravě odkazů na stránce. K tomu nabízí CSS řadu možností, pomocí kterých lze oslovit různé stavy odkazů a nakonec je i opticky upravit.
Pokud například chcete přiřadit odkazu červenou barvu, pak by to vypadalo takto:
a:link {
color: red;
}
S a:visited jsou označeny již navštívené odkazy. Pomocí následující syntaxe lze zobrazit takové odkazy, které byly již jednou kliknuty, v modré barvě.
a:visited {
color: blue;
text-decoration:none;
}V prohlížeči to vypadá takto:
Chcete-li upravit zvlášť odkazy, které jsou právě kliknuty, je to také možné.
a:active {
font-weight: bold;
color: blue;
text-decoration: none;
}
K tomu se používá syntaxe a:active.
Syntaxe a:hover se naopak vztahuje k situaci, kdy se myší miká přes odkaz. Kromě toho existuje s a:focus ještě další pseudoelement. Tento popisuje okamžik, kdy odkaz získává focus.
Další pseudoelementy
Existují pseudoelementy, pomocí nichž lze oslovit části jiných prvků. Typickým příkladem je ::first-letter. Tento pseudoelement vybírá první znak aktuálního prvku. Může být použit pro všechny prvky obsahující text. Pozor: Pseudoelementy musí být uvedeny pouze na konci všech selektorů. Musí tedy být před otevírací složenou závorkou.
h1::first-letter {
color: blue;
}
Pomocí ::first-line lze oslovit první řádek prvku. Tento pseudoelement je použitelný pouze na elementy na úrovni bloku. Jedno příklad:
p::first-line {
background-blue;
}
A zde je výsledek v prohlížeči:
ein
Pomocí pseudoelementů :after a :before lze před a po prvku zobrazit dodatečné obsahy. Pomocí content se určuje, co má být zobrazeno.
• normal – pseudoelement, který je obvykle definován, není generován.
• none – pseudoelement není vygenerován.
• <string> – bude vypsána uvedená řetězcová hodnota. Řetězce je třeba uvést v jednoduchých nebo dvojitých uvozovkách.
• <uri> – vloží se zdroj uvedený pod URI.
• <counter> – definuje počítadlo nebo oslovuje konkrétní počítadlo.
• attr(<identifier>) – hodnota atributu uvedená v závorkách se vloží.
• close-quote – vloží uzavírací uvozovky.
• no-close-quote – sice se nevloží uzavírací uvozovky, ale hloubka zanoření se zvýší o jedna.
• no-open-quote – sice se nevloží otvírací uvozovky, ale hloubka zanoření se zvýší o jedna.
• open-quote – zobrazí se otevírací uvozovky.
Jedno příklad:
ul li:before {
content: uri("bullet.gif");
}
S CSS3 byl zaveden pseudoselektor :not. Pomocí něj lze velmi snadno cíleně vybírat obsah. První příklad ukazuje, jak výkonný tento pseudoselektor vlastně je. Předpokládejme, že chcete vybrat všechny odkazy, které nemají atribut href. Příslušná syntaxe by vypadala následovně:
a:not([href])
"Běžné" odkazy by tímto způsobem nebyly ovlivněny. Přístup ke konkrétním definicím kotvy by však byl úspěšný.
<a name="top">Seitenanfang</a>
Pomocí trochu detailnějšího příkladu lze demonstrovat výkonnost :not. V rámci dokumentu byly definovány různé odstavce textu.
<body> <h1>PSD-Tutorials.de</h1> <p>Das ist ein Absatz.</p> <p>Das ist ein weiterer Absatz.</p> <div>Das ist ein Textbereich.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
Kromě textových odstavců označených p existuje také oblast div a hypertextový odkaz. Nyní bude následující:
• Všechny odstavce označené p dostanou černou barvu písma.
• Na místech, kde nejsou žádné odstavce p, se naopak bude používat červená barva písma.
Příslušná CSS syntaxe vypadá následovně:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}Princip dědičnosti
Jednou z nejdůležitějších věcí při porozumění CSS definic je dědičnost. Ve skutečnosti jsou v CSS stylové vlastnosti zděděny z jednoho na druhý prvek.
Příklad:
html {
color: red
}Tato definice přiřazuje prvku html červenou barvu popředí.
Kvůli principu dědičnosti se tato definice barvy vztahuje pouze na obsah divu. Odstavec p se však zobrazuje černým písmem.
V CSS existuje několik způsobů, jak stanovit stylové definice. To je také důvod, proč mohou být pro prvek protichůdné pokyny. Pro tyto případy CSS stanovuje váhovací princip. Tímto principem je pevně ošetřeno, které pokyny mají pro prvek přednost. Nemám v úmyslu jít do posledního detailu tohoto principu. Podrobné informace naleznete například na stránce http://wiki.selfhtml.org/wiki/CSS/Kaskade nebo také na stránce http://www.thestyleworks.de/basics/cascade.shtml.
Co je mi důležité, je ukázat, na co si musíte dávat pozor při definování CSS vlastností. K tomu slouží následující příklad:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC;
}
h2 strong {
color: red;
}
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Toto je odstavec s <strong>tuctovým slovem</strong>.</p>
<h2>Toto je nadpis s <strong>tuctovým slovem</strong>.</h2>
</div>
</body>
</html>V prohlížeči to vypadá následovně:
Jak vidíte, slova označená strong jsou formátována různě. Který formátování se použije, závisí na pořadí definic.
Alternativně je zde klíčové slovo !important, kterým můžete označit CSS instrukci jako zvláště důležitou.
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC !important;
}
h2 strong {
color: red;
}
</style>Zde je opět pohled na výsledek:
Určitě si v rámci tohoto souvislosti přečtěte také zmiňované zdroje v tomto tutoriálu. (I když se pro začátek nemusíte příliš hluboko v této problematice ponořit).
