CSS / Selektory pseudoklas
Łączenie selektorów
W jaki sposób połączyć kilka selektorów w jednej regule stylów CSS? Jak zmienić obramowanie obrazka po wskazaniu myszką? Jak dodać ciekawie wyglądający tekst po wskazaniu myszką?
Na koniec warto wspomnieć o jeszcze jednej przydatnej własności selektorów CSS. Jak się można było przekonać, rodzajów selektorów jest bardzo wiele - każdy przeznaczony do innego celu. Co jednak zrobić, jeżeli potrzebujemy w jednej regule stylu zastosować kilka selektorów prostych? Czy jest to w ogóle możliwe? Oczywiście, że tak. Wystarczy po prostu wpisać je jeden po drugim (bez żadnych odstępów) w następującej kolejności:
- selektor typu lub selektor uniwersalny
- selektory atrybutów, selektor identyfikatora, selektor klasy lub selektory pseudoklas (w dowolnej kolejności)
- selektory pseudoelementów
Zespół selektorów z punktu 1 i 2 nazywamy selektorem prostym. W jednej regule może wystąpić kilka selektorów prostych - każdy rozdzielony przez tzw. kombinator, tj. znaki spacji, ">" lub "+", które są wykorzystywane przy tworzeniu selektorów: potomka, dziecka i braci. Selektor pseudoelementów może się znajdować tylko za ostatnim selektorem prostym w regule stylu.
Przykład:
a.przyklad_selektory:hover { font-weight: bold }Taka reguła kojarzy każdy element typu a (czyli odsyłacz), który będzie posiadał klasę
class="przyklad_selektory", kiedy zostanie on wskazany myszką:Wskaż ten odsyłacz myszką: class="przyklad_selektory". A tutaj jest odsyłacz bez klasy.
Taki sposób tworzenia selektora odsyłaczy jest szczególnie przydatny, ponieważ zwykle chcemy część odnośników na stronie wystylizować inaczej, jeżeli chodzi o ich podświetlanie po wskazaniu myszką. Mogą to być np. linki z menu, które powinny wyglądać inaczej niż normalne hiperłącza w tekście. Jeżeli jednak chcemy zmienić wygląd wszystkich odsyłaczy znajdujących się w jednym miejscu - np. w menu serwisu - wygodniej jest użyć następującej reguły:
.przyklad_selektory2 a:hover { font-weight: bold }
Teraz wystarczy wstawić:
<div class="przyklad_selektory2"> <a href="?">Link1</a> <a href="?">Link2</a> <a href="?">Link3</a> </div>
aby zmienić wygląd po wskazaniu wszystkich odsyłaczy z tego bloku, bez wpływu na pozostałe znajdujące się na stronie:
Zmiana koloru obramowania obrazka po wskazaniu go myszką:
img.przyklad_selektory3 { border: 5px solid black }
a:hover img.przyklad_selektory3 { border: 5px solid red }Wskaż poniższy obrazek myszką:
Ten sposób powinien działać również w przeglądarce Microsoft Internet Explorer 5.0 lub nowszej.
Inny ciekawy przykład - tym razem z automatycznym generowaniem zawartości:
a.przyklad_selektory4:hover:after { content: "Rollover"; position: absolute; color: #000; background-color: #eee; font-size: 10px; border-width: 1px 2px 2px 1px; border-style: solid; border-color: #888; padding: 1px 5px }
Jeśli wskażesz ten odsyłacz myszką, powinien pojawić się zaraz za nim nowy element z napisem "Rollover" (użytkownicy przeglądarki MSIE 7.0 lub starszej prawdopodobnie nie zobaczą rezultatu).
A oto bardziej zaawansowany przykład:
div.przyklad_selektory5 > ul:first-child[dir="ltr"]:lang(pl) + p[title]:first-letter { color: red; font-weight: bold; font-size: larger }
- To jest wykaz, który znajduje się wewnątrz bloku zaraz na jego początku, a zatem jest jego pierwszym dzieckiem.
- Wykaz posiada atrybuty: dir="ltr" lang="pl"
To jest akapit, czyli brat wykazu, który posiada przypisany atrybut title. Pierwsza litera w tym akapicie powinna być zmodyfikowany przez regułę stylów.
...i tutaj kończy się blok (jeżeli używasz przeglądarki MSIE 7.0 lub starszej, prawdopodobnie nie zobaczysz żadnych rezultatów).W powyższej regule stylów możemy wyróżnić następujące selektory proste:
div.przyklad_selektory5ul:first-child[dir="ltr"]:lang(pl)p[title]:first-letter