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: CSS
