2010-05-14 10:15:32

Jak wykorzystać selektory cz. 3.

Oto ostatnia część opisu selektorów CSS. W tym artykule opiszę selektory odnoszące się do elementów strony, z którymi nastąpiła jakaś interakcja, lub są ich modyfikatorami. Selektory te nazywane są pseudoklasami. Łatwo można je rozpoznać po znaku „:” w selektorze.

Definicja styli nadal znajduje się w pliku „style.css”. Natomiast kod strony „index.html” powinien wyglądać tak:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Lorem ipsum</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>
Ten akapit jest pierwszym akapitem na tej stronie. Nie jest specjalnie długi, ale za to bez sensu. Jeżeli go nie zrozumiałeś, nie przejmuj się. 7 na 10 naukowców też go nie rozumie. Ostatnie badania dowodzą, że ten akapit nie istnieje.
</p>
<div>
	<p>
	Lorem ipsum dolor sit amet enim. Etiam ullamcorper. <a href="#1">test 1</a> Suspendisse a pellentesque dui, non felis. <a href="#2">test 2</a> <a href="#3">test 3</a> Maecenas malesuada elit lectus felis, <a href="#4">test 4</a> malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.</p>
</div>
<p>Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.</p>
</body>
</html>

Jeżeli chcemy wyróżnić pierwszą linię jakiegoś tekstu, lub pierwszą linię każdego akapitu, możemy zastosować :first-line. W przykładzie poniżej pierwsza linia każdego akapitu zostanie wyświetlona przy pomocy kapitalików.

p:first-line {font-variant: small-caps;}

Można też wyróżnić pierwszą literę powiększając ją…

p:first-letter {font-size: 200%;}

albo pierwsze wystąpienie danego elementu w innym elemenci. W tym przypadku będzie to zmiana koloru pierwszego akapitu. Styl zostanie powtórzony dla kolejnego akapitu, gdyż jest on pierwszym w bloku div.

p:first-child {color: #cc0000;}

Przy pomocy styli można wstawiać dowolną zawartość przed lub po dowolnym elemencie. Np. błękitną gwiazdkę przed każdym odnośnikiem i dodatkowy tekst za blokiem div. Te ustawienia mogą nie działać w starszych przeglądarkach i w IE 8 w widoku zgodności

a:before {content: "*"; color: #00ccff;}
div:after {content: "Tu kończy się blok div"}

Oddzielną grupą pseudoklas są te związane z odnośnikami. Wygląd odnośników można modyfikować w zależności od tego, czy są wskazywane aktualnie kursorem (:hover), zostały już wcześniej odwiedzone (:visited), właśnie zostały kliknięte (:active), lub zostały wybrane klawiszem tabulacji (:focus). Za pomocą pseudoklasy :focus można też wyróżnić pola formularzy, które są aktualnie edytowane. Pseudoklasa :focus może pokrywać się z pseudoklasą :active. Zwykły stan odnośników definiuje się poprzez pseudoklasę :link.

a:link {color: #00cc00; text-decoration: none;}
a:visited {color: #006600; text-decoration: none;}
a:hover {color: #66ff66; text-decoration: underline;}
a:active {color: #ff0000; text-decoration: none;}
a:focus {color: #ff00ff; text-decoration: none;}

Przykładowa strona po zastosowaniu tego selektora wygląda tak:

Ten akapit jest pierwszym akapitem na tej stronie. Nie jest specjalnie długi, ale za to bez sensu. Jeżeli go nie zrozumiałeś, nie przejmuj się. 7 na 10 naukowców też go nie rozumie. Ostatnie badania dowodzą, że ten akapit nie istnieje.

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Tagi:

Dodaj odpowiedź