Przejdź do treści

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

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:

Link1 Link2 Link3

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

class="przyklad_selektory3"

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".


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 blok, który posiada klasę class="przyklad_selektory5"...
  • 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"
...ciąg dalszy bloku...

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.

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

Komentarze

Zobacz więcej komentarzy

Facebook