Łą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:

1. selektor typu lub selektor uniwersalny
2. selektory atrybutów, selektor identyfikatora, selektor klasy lub selektory pseudoklas (w dowolnej kolejności)
3. 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

📋 Zaznacz kod ▶ Edytuj na żywo

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

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:

📋 Zaznacz kod ▶ Edytuj na żywo

.przyklad_selektory2 a:hover { font-weight: bold }

Teraz wystarczy wstawić:

📋 Zaznacz kod ▶ Edytuj na żywo

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

📋 Zaznacz kod ▶ Edytuj na żywo

img.przyklad_selektory3 { border: 5px solid black }
a:hover img.przyklad_selektory3 { border: 5px solid red }

Wskaż poniższy obrazek myszką:

Inny ciekawy przykład - tym razem z automatycznym generowaniem zawartości:

📋 Zaznacz kod ▶ Edytuj na żywo

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 }

A oto bardziej zaawansowany przykład:

📋 Zaznacz kod ▶ Edytuj na żywo

div.przyklad_selektory5 > ul:first-child[dir="ltr"]:lang(pl) + p[title]:first-letter { color: red; font-weight: bold; font-size: larger }

W powyższej regule stylów możemy wyróżnić następujące selektory proste:

• div.przyklad_selektory5
• ul:first-child[dir="ltr"]:lang(pl)
• p[title]:first-letter