Jak wykorzystać selektory cz. 2
W poprzednim artykule przedstawiłem selektor uniwersalny, selektor typu, selektory potomka, dziecka i braci. W tym artykule będę kontynuował opis używania kolejnych selektorów.
DefinicjÄ™ styli bÄ™dziemy nadal umieszczać w pliku „style.css”. Kod strony „index.html” zmieniÅ‚ siÄ™ w niewielkim stopniu i 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> <div> <p> Lorem ipsum dolor sit amet enim. <strong class="wielkie">Etiam ullamcorper. <a id="pierwszy" href="#">test 1</a></strong> Suspendisse a pellentesque dui, <span class="wielkie">non felis. <a rel="nofollow" href="#">test 2</a></span> <a href="#">test 3</a> Maecenas malesuada elit lectus felis, <a href="#" rel="follow">test 4</a> malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.</p> </div> <p class="wielkie">Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. </p> </body> </html> |
CzÄ™sto bywa tek, że część wÅ‚aÅ›ciwoÅ›ci ma być identyczna dla różnych elementów strony. Np. i akapity i elementy div majÄ… mieć identyczne obramowanie, a kolor tÅ‚a dla każdego z tych elementów ma być inny. Do ustalenia obramowania użyjemy selektora grupowania – selektory poszczególnych elementów umieszczamy oddzielone przecinkiem jeden za drugim przed definicjÄ… stylu. PozostaÅ‚e wÅ‚aÅ›ciwoÅ›ci okreÅ›limy w zwykÅ‚ych selektorach typów.
div, p {border: 2px solid #ff0000;} div {background-color: #ff9966;} p {background-color: #99ff66;} |
Przykładowa strona po zastosowaniu tego selektora wyglądała by tak:
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.
Grupować można selektory wszystkich rodzajów. Następny rodzaj selektora to selektor atrybutu. Oto jego przykład:
a[rel] {color: #66ff66;} |
a to wyglÄ…d strony:
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.
Selektor wskazaÅ‚ wszystkie odnoÅ›niki (elementy „a”) posiadajÄ…ce atrybut „rel” bez wzglÄ™du na jego wartość. Jeżeli chcemy wyróżnić elementy o okreÅ›lonej wartoÅ›ci atrybutu, użyjemy selektora atrybutu o okreÅ›lonej wartoÅ›ci
a[rel="nofollow"] {color: #cc33ff;} |
Strona będzie wyglądała tak jako poniżej.
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.
Tym razem wybrane zostaÅ‚y tylko ten odnoÅ›nik, którego atrybut „rel” miaÅ‚ wartość „nofollow”.
Selektor klasy pozwala na wybranie wszystkich elementów określonej klasy, albo tylko elementów określonego typu tej klasy. Selektor klasy jest zapisywany z kropką przed nazwą klasy, może być dodany do innego selektora (bez spacji przed kropką), ogranicza wówczas zakres tego selektora do elementów tej klasy:
.wielkie {font-size: large;} span.wielkie {font-weight: bold;} |
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.
Wszystkie elementy klasy „wielkie” zostaÅ‚y powiÄ™kszone. Dodatkowo, dziÄ™ki drugiej definicji stylu, zawartość elementu „span” zostaÅ‚a też pogrubiona. Pogrubienie elementu „strong” wynika z samej jego definicji i jest realizowane przez przeglÄ…darkÄ™, a nie style.
Selektor identyfikatora
#pierwszy {border: 4px double #ff0000;} |
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.
Element o identyfikatorze „pierwszy” zostaÅ‚ otoczony podwójnÄ… ramkÄ…. Na jednej stronie wczytanej do przeglÄ…darki może znajdować siÄ™ tylko jeden element o okreÅ›lonym identyfikatorze.
Ciąg dalszy może pojawić się szybciej, jeżeli poniżej pojawi się kilka komentarzy od was.
Tagi: CSS
