W tym ostatnim samouczku dotyczącym selektorów przedstawiam Wam bardzo specjalną formę selektorów. Chodzi o tzw. pseudoklasy i pseudoelementy. Są to selektory, które nie odnoszą się do konkretnych elementów HTML, ale są generowane przez urządzenie wyjściowe.
Przy użyciu pseudoklas i pseudoelementów można definiować deklaracje dla elementów HTML, które nie mogą być jednoznacznie opisane przez pojedynczy element HTML. Typowymi przykładami są hiperłącza, które zostały właśnie kliknięte lub które nie zostały jeszcze odwiedzone.
Stylizowanie hiperłączy
Bardzo często chcemy dostosować styl hiperłączy na stronie. Do tego CSS oferuje wiele możliwości, dzięki którym można dostosować różne stany hiperłączy i w końcu także ich wygląd.
Jeśli chcielibyście nadać hiperłączu czerwony kolor, wyglądałoby to następująco:
a:link {
color: red;
}
Z kolei a:visited oznacza już odwiedzone hiperłącza. Poniższa składnia pozwala na przedstawienie takich hiperłączy, które zostały już kliknięte, w kolorze niebieskim.
a:visited {
color: blue;
text-decoration: none;
}W przeglądarce wygląda to tak:
Jeśli chcecie dostosować hiperłącza, które właśnie zostały kliknięte, również jest to możliwe.
a:active {
font-weight: bold;
color: blue;
text-decoration: none;
}
Do tego celu używana jest składnia a:active.
Składnia a:hover natomiast odnosi się do stanu, gdy wskaźnikiem myszy najedziemy na hiperłącze. Ponadto istnieje pseudoelement a:focus. Opisuje on moment, w którym hiperłącze otrzymuje fokus.
Inne pseudoelementy
Istnieją pseudoelementy, które pozwalają na wybór części innych elementów. Typowym przykładem jest ::first-letter. Pseudoelement ten wybiera pierwszy znak bieżącego elementu. Może być używany dla wszystkich elementów zawierających tekst. Ale uwaga: pseudoelementy muszą być notowane tylko na końcu wszystkich selektorów. Muszą więc znajdować się przed otwierającą nawiasy klamrowe.
h1::first-letter {
color: blue;
}
Za pomocą ::first-line można wybrać pierwszą linię elementu. Pseudoelement ten jest stosowany tylko do elementów blokowych. Przykład:
p::first-line {
background-blue;
}
A oto rezultat w przeglądarce:
ein
Za pomocą pseudoelementów :after i :before można dodać dodatkowe treści przed lub po elemencie. Za pomocą content określa się, co ma być wyświetlone.
• normal – domyślny pseudoelement nie jest generowany.
• none – pseudoelement nie jest generowany.
• <string> – podany ciąg znaków jest wyświetlany. Ciągi znaków muszą być ujęte w pojedyncze lub podwójne cudzysłowy.
• <uri> – dołączany jest zasób określony w URI.
• <counter> – definiuje licznik lub odnosi się do określonego licznika.
• attr(<identifier>) – wstawia wartość atrybutu podanego w nawiasach.
• close-quote – dodaje zamykający cudzysłów.
• no-close-quote – nie jest dodawany zamykający cudzysłów, ale zwiększa się o jeden poziom zagnieżdżenia.
• no-open-quote – nie jest dodawany otwierający cudzysłów, ale zwiększa się o jeden poziom zagnieżdżenia.
• open-quote – dodaje otwierający cudzysłów.
Przykład:
ul li:before {
content: uri("bullet.gif");
}
W CSS3 został także wprowadzony pseudoselektor :not. Za jego pomocą można łatwo wybierać konkretne treści. Pierwszy przykład pokaże, jak potężny jest właściwie ten pseudoselektor. Załóżmy, że chcecie wybrać wszystkie hiperłącza, które nie posiadają atrybutu href. Odpowiednia składnia wyglądałaby następująco:
a:not([href])
"Zwykłe" hiperłącza nie będą dotknięte tą składnią. Ale dostęp do definicji zakotwień byłby możliwy.
<a name="top">Seitenanfang</a>
Pokażę szerszy przykład, aby zobrazować, jak potężny jest :not. Wewnątrz dokumentu zdefiniowano liczne akapity tekstu.
<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>
Obok paragrafów oznaczonych p istnieje również obszar div i hiperłącze. Teraz ma nastąpić następujące:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}Zasada dziedziczenia
Jedną z najważniejszych rzeczy przy definiowaniu CSS jest dziedziczenie. W rzeczywistości właściwości stylu są dziedziczone z jednego elementu na drugi.
Przykład:
html {
color: red
}Dzięki tej definicji elementowi html zostaje przypisany czerwony kolor czcionki.
Z powodu zasady dziedziczenia ta definicja koloru dotyczy tylko zawartości div. Paragraf p jest natomiast wyświetlany w kolorze czarnym.
W CSS istnieje różne sposoby definiowania stylów. Dlatego zdarza się, że dla elementu mogą być podane sprzeczne instrukcje. W takich przypadkach CSS stosuje zasadę wagi. Na podstawie tej zasady jest jasno określone, które instrukcje mają pierwszeństwo dla elementu. Nie chcę teraz wchodzić w drobne szczegóły dotyczące tej zasady. Szczegółowe informacje na ten temat znajdziesz np. na stronie http://wiki.selfhtml.org/wiki/CSS/Kaskade lub też na stronie http://www.thestyleworks.de/basics/cascade.shtml.
To, o co mi chodzi, to pokazać, na co warto zwracać uwagę podczas definiowania właściwości CSS. Służy temu następujący przykład:
<!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>W przeglądarce wygląda to w ten sposób:
Jak widać, słowa oznaczone jako strong są formatowane różnie. Które właściwości formatowania zostaną zastosowane, zależy ostatecznie od kolejności definicji.
Alternatywnie istnieje również słowo kluczowe !important, które pozwala oznaczyć instrukcję CSS jako szczególnie ważną.
<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>Tutaj ponownie spojrzenie na wynik:
Koniecznie przeczytaj jeszcze raz wymienione w tym samouczku źródła. (Choć na początku nie trzeba wchodzić zbyt głęboko w tę tematykę).
