Ebben az utolsó szelektorokkal kapcsolatos útmutatóban egy nagyon speciális szelektor típust mutatok be nektek. Ezek a törvénynek nevezett pseudóosztályok és pseudoelemek. Ezek olyan szelektorok, amelyek nem konkrét HTML elemekre vonatkoznak, hanem az eszköz által generáltak.
A pseudóosztályok és pseudoelemek segítségével deklarációk definiálhatók olyan HTML részekre, amelyeket nem lehet egyértelműen egy HTML elemmel leírni. Tipikus példák egy éppen kattintott vagy még nem meglátogatott hiperhivatkozás.
Hiperhivatkozások formázása
Nagyon gyakran szeretnénk a webhely hiperhivatkozásait formázni. Ehhez a CSS rengeteg lehetőséget kínál, amelyek segítségével a hiperhivatkozások különböző állapotait lehet megcélozni és végül vizuálisan is testre szabni.
Ha például piros színt szeretnénk hozzárendelni egy hiperhivatkozásnak, akkor így nézne ki:
a:link {
color: red;
}
Az a:visited pedig már meglátogatott hiperhivatkozásokat jelöl. A következő szintaxis segítségével olyan hiperhivatkozásokat, amelyeket már korábban kattintottak, kék színnel lehet megjeleníteni.
a:visited {
color:blue;
text-decoration:none;
}A böngészőben ez így néz ki:
Szeretnénk külön formázni a hiperhivatkozásokat, amelyek éppen most lettek kattintva, ez is lehetséges.
a:active {
font-weight: bold;
color: blue;
text-decoration: none;
}
Ehhez a szintaxishoz az a:active szintaxis használható.
Az a:hover szintaxis az egérmutatóval a hiperhivatkozás fölé mozgatás állapotára vonatkozik. Emellett az a:focus pseudoelem is létezik. Ez a szó leírja az adott pillanatot, amikor a hiperhivatkozás fókuszt kap.
További pseudoelemek
Vannak pseudoelemek, amelyek más elemek részeivel lehetnek kapcsolatban. Egy tipikus példa erre a ::first-letter. Ez a pseudoelem a jelenlegi elem első karakterét választja ki. Felhasználható minden olyan elemre, amely tartalmaz szöveget. De figyelem: A pseudoelemeket csak a szelektorok végén szabad feljegyezni. Tehát a nyitó kapcsos zárójel előtt kell állniuk.
h1::first-letter {
color: blue;
}
Az ::first-line segítségével a szöveg első sora megcélozható egy elemen belül. Ez a pseudoelem kizárólag blokkszintű elemekre alkalmazható. Egy példa:
p::first-line {
background-blue;
}
És itt van az eredmény a böngészőben:
egy
Az :after és :before pseudoelemek segítségével egy elem elé és után extra tartalmak jeleníthetők meg. A content határozza meg, hogy mit kell kimenetként megjeleníteni.
• normál - általában a definiált pseudoelem nem kerül generálásra.
• none - a pseudoelem nem kerül generálásra.
• <string> - a megadott karakterláncot kimenetként kell megjeleníteni. A karakterláncokat egyszeres vagy dupla idézőjelek közé kell tenni.
• <uri> - a megadott URI alatti erőforrás kerül beillesztésre.
• <counter> - egy számlálót meghatároz vagy egy adott számlálót céloz meg.
• attr(<azonosító>) - a zárójelek között megadott attribútum értéke kerül beillesztésre.
• close-quote - egy záró idézőjelet illeszt be.
• no-close-quote - bár nem illeszt be záró idézőjelet, ezáltal egy fokkal növeli a beágyazottság mélységét egy egységgel.
• no-open-quote - bár nem illeszt be nyitó idézőjelet, ezáltal egy fokkal növeli a beágyazottság mélységét egy egységgel.
• open-quote - egy nyitó idézőjelet illeszt be.
Egy példa:
ul li:before {
content: uri("bullet.gif");
}
A CSS3-mal bevezetésre került a :not pseudoszűrő. Ez segítségével nagyon egyszerűen kiválaszthatók az elemek. Egy első példa megmutatja, milyen erősek valójában ezek a pseudoszűrők. Tegyük fel, hogy kiválasztanánk az összes hiperhivatkozást, amelynek nincs href attribútuma. A megfelelő szintaxis a következő lenne:
a:not([href])
A "normál" hiperhivatkozások nem érintettek ezzel a szintaxissal. Az átkötési meghatározásokhoz azonban a hozzáférés ezen keresztül sikerülne.
<a name="top">Oldal eleje</a>
Egy részletesebb példa mutatja be, milyen erős a :not. Egy dokumentumban számos szövegrészletet határoztak meg.
<body> <h1>PSD-Tutorials.de</h1> <p>Ez egy bekezdés.</p> <p>Ez egy további bekezdés.</p> <div>Ez egy szövegterület.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
A p-taggal jelölt szövegbekezdéseken kívül van még egy div-terület és egy hiperhivatkozás. Most a következő fog történni:
• Minden p-ként megjelölt bekezdés fekete szövegszínt kap.
• Azokon a helyeken, ahol nincs p-bekezdés, viszont piros szövegszín lesz használva.
A megfelelő CSS szintaxis a következőképpen néz ki:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}Az öröklődés elve
Az egyik legfontosabb dolog, amikor a CSS-definíciókról van szó, az az öröklődés. Valójában a CSS-ben a stílus tulajdonságai egyik elemről a másikra öröklődnek.
Példa:
html {
color: red
}Ez a definíció azt jelenti, hogy a html elem előtér-színe piros lesz.
Az öröklődés elvének értelmében ez a színdefiníció most először csak a html alá eső összes elemre vonatkozik. Most tehát alapértelmezetten minden azon elem pirosan jelenik meg, ami a html alatt található. Ennek a változatnak az előnye: Ezekre az elemekre nem kell külön piros színt megadni. De mi van, ha a p-bekezdések tartalma nem pirosan kell jelenjen meg? Akkor felül kell írni a html szülőjének színdefinícióját.
html {
color: red;
}
p {
color: #000;
}
Mi történik, ha most például két p és egy div eleme van?
<body> <p>PSD-Tutorials.de</p> <div>Welt</div> </body>
Az eredmény így néz ki:
A html színdefiníciója kizárólag a div tartalmára vonatkozik. A p bekezdés viszont fekete szöveggel jelenik meg.
A CSS-ben többféle lehetőség van stílusdefiníciók megadására. Ezért fordulhat elő, hogy egy elemre ellentmondásos utasítások vannak. Az ilyen esetekre a CSS egy súlyozási elvet ír elő. Ennek az elvnek megfelelően egyértelműen le van szabályozva, hogy egy elem esetében melyik utasítás kap előnyt. Ebben a példában nem szeretnék részletesen kitérni arra, hogy ez az elv hogyan működik. Az ehhez kapcsolódó részletes információkat például megtalálhatjátok a http://wiki.selfhtml.org/wiki/CSS/Kaskade oldalon vagy a http://www.thestyleworks.de/basics/cascade.shtml webhelyen.
Ami nekem fontos, az az, hogy megmutassam, mire kell figyelnetek, amikor CSS tulajdonságokat definiáltok. Erre szolgál az alábbi példa:
<!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>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>A böngészőben ez így néz ki:
Az eredmények szerint például a strong-ként megjelölt szavak különbözően formázódnak. Az azonosítási típusú formázás kiválasztása végül a definíciók sorrendjétől függ.
Alternatív megoldásként ott van a !fontos kulcsszó, amellyel egy CSS utasítást különösen fontosként jelölhetsz meg.
<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>Itt is egy pillantást vehetsz az eredményre:
Ebben az összefüggésben mindenképpen olvassátok el újra ezt a tutorialban említett forrásokat. (Még ha eleinte nem is kell túlságosan mélyre ásnod ebben a témában).
