Selektory

Selektor nie ma ścisłej definicji.

Określa zarówno każdy pojedynczy selektor (selektory proste), połączenie kilku selektorów prostych za pomocą kombinatorów, jak i grupę wszystkich selektorów dla reguły.

Jeśli chce się zmienić wygląd jakiegoś elementu XHTML, trzeba wskazać, którego. Do tego służą selektory (ang. select — wybrać).

Jest wiele różnych selektorów i można stosować ich kombinacje po to, aby dało się „hurtem” wybrać odpowiednie elementy i nie trzeba było powtarzać reguł dla każdego z osobna.

Przy wyświetlaniu strony przeglądarka sprawdza, które reguły pasują do danego elementu XHTML. Jeśli pasuje kilka reguł, to łączy je dając pierwszeństwo tym wskazanym przez bardziej szczegółowe selektory. Jest to część kaskady, która zostanie dokładnie opisana później.

Jak zrozumieć skomplikowane selektory?

W praktyce można natknąć się na „potwory” jak np.:

  html.js #main > :last-child a:visited:hover {/* tu jakieś właściwości*/}

najprościej jest je rozszyfrować czytając je od końca. W przykładzie selektor określa znajdujący się pod myszą (:hover) odwiedzony (:visited) element <a>, który jest potomkiem (sama spacja to kombinator potomka) ostatniego elementu (:last-child) bezpośrednio w (>) elemencie o identyfikatorze main, który jest w <html> mającym klasę js.

Selektory proste

To są podstawowe „klocki” do budowania selektorów:

Selektor elementu/typu

Nazwy elementów muszą być pisane małymi literami

Pasuje do wszystkich elementów w dokumencie, które mają określoną nazwę. Zapisuje się go po prostu jako nazwę elementu (bez <>):

 marchew {kolor: czerwony;}
 Wszystkie marchewki są czerwone.

 Ten selektor nada style elementowi <marchew/> (w dowolnym miejscu w dokumencie — liczy się tylko nazwa), ale nie będzie pasował np. do <ogórek/>.

To jest najważniejszy i zarazem najprostszy sposób nadania stylu dokumentom.

Selektor identyfikatora

Element może mieć nadany unikalny identyfikator. Tylko jeden element w dokumencie może mieć dany identyfikator. Selektor zapisuje się jako element#identyfikator:

 żaba#kermit {kolor: zielony;}

 Pasuje do <żaba id="kermit"/>. Nie pasuje do <żaba/> ani <żaba id="księżniczka"/>.

Najczęściej wykorzystuje się go do zaznaczenia podstawowych sekcji strony, np. nagłówek, menu nawigacyjne, stopka.

Selektor klasy Bug w IE6

Elementy mogą mieć jedną lub więcej klas. Klas używa się do określenia szczegółowych cech elementów lub określenia przynależności wielu różnych elementów do danej klasy (grupy, rodziny). Selektor klasy jest nazwą klasy połączoną z innym selektorem za pomocą kropki:

 code.xhtml {color: blue;}
 Nadaj kolor niebieski czcionce w przykładowym listingu.

 Pasuje do <code class="xhtml"/><code class="xml xhtml"/>. Nie pasje do <code/> ani <code class="css"/>.

Klas używa się do nadania stylów elementom, które są „rozsypane” po dokumencie tak, że nie sposób nadać im stylu w inny sposób, np. używając selektora identyfikatora w połączeniu z kombinatorem.

Selektor pseudoklasy/pseudoelementu Bug w IE6

Poza klasą nadaną przez autora, element może mieć pseudoklasę nadaną przez przeglądarkę. Selektor pseudoklasy jest nazwą połączoną z innym selektorem za pomocą dwukropka (nie może być spacji wokół dwukropka):

 odsyłacz:hover {kolor: czerwony;}
 Nadaj czerwony kolor odsyłaczowi pod kursorem.

Pseudoklasy

Ze względu na kaskadę pseudoklasy trzeba zapisać w tej kolejności: link, visited, hover, focus, active.

Odnośniki, które nie zostały jeszcze odwiedzone.
visited
Odnośniki, które zostały odwiedzone.
hover
Pseudoklasa nadawana elementom, gdy znajduje się nad nimi wskaźnik myszy. Bug w IE6
focus
Elementy, które mają fokus, np. element formularza, który użytkownik właśnie wypełnia.Bug w IE
active
Elementy, które są aktywne, np. odnośniki podczas klikania na nie myszą. Bug w IE6
first-child
Element, który jest pierwszym dzieckiem swojego rodzica — np. pierwszy element listy. Bug w IE6

Pseudoklasa działa podobnie do selektora atrybutu x[lang=en]

lang
Określa specjalne zasady dla różnych języków, np. q:lang(en) pasuje do cytatów anglojęzycznych dla <q lang="en">
not
Określa elementy, które nie będą przetwarzane (np. *:not(p) {color: pink} – nadaj kolor różowy wszystkim elementom, oprócz akapitów).

Pseudoelementy

Pseudoelementy są to fragmenty elementów dokumentu. Składnia tego selektora jest identyczna jak pseudoklas.

Nie ma pseudoelementu dla pierwszego słowa. W takich przypadkach należy w kodzie HTML umieścić dodatkowy element, np. <span>

first-line
Pierwsza linia tekstu zawieranego przez element. Ten selektor nie jest potrzebny do wcięć akapitowych — zob. text-indent.
first-letter
Pierwsza litera tekstu zawieranego przez element p:first-letter {font-size: 200%;} Pasuje tylko do pierwszej litery zawartości <p>.
selection (aka -moz-selection w przeglądarkach z rodziny Mozilli)
Ustala kolor tekstu zaznaczonego kursorem (np. p::selection {background: khaki; color: olive;} – tekst w akapicie po zaznaczeniu ma kolor tekstu olive, tło khaki).

Osobno zostały opisane specjalne pseudoelementy pozwalające dodawać treść za pomocą stylów.

Selektory atrybutu Bug w IE6

Pasują tylko do elementów posiadających dany atrybut lub posiadających atrybut o określonej wartości.

Jeśli podana jest tylko nazwa atrybutu, to selektor pasuje do wszystkich elementów posiadających taki atrybut, niezależnie od jego wartości:

 kot[imie]
 Pasuje do <kot imie="mruczek"><kot imie="łasuch">, ale nie <kot />.

Jeśli wartość umieszczona w selektorze zawiera znaki inne niż litery i cyfry, to musi być umieszczona w cudzysłowie

Jeśli poda się dodatkowo wartość, to selektor pasuje tylko do atrybutów mających dokładnie taką wartość:

 kot[imie=mruczek]
 Pasuje do <kot imie="mruczek" sierść="pasiasta">, ale nie do <kot imie="mały mruczek">.

Zamiast znaku równości można też użyć:

Poniższa składnia nie należy do standardu 2.1 CSS lecz dopiero do CSS 3, ale jest rozpoznawana przez część przeglądarek.

atrybut^=wartość
pasuje do atrybutów zaczynających się od podanej wartości (np. a[href^="http:"] pasuje do odnośników z absolutnym URI)
atrybut$=wartość
pasuje do atrybutów kończących się na podaną wartość (np. a[href$=".pdf"] pasuje do odnośników do dokumentów PDF)
atrybut*=wartość
pasuje do atrybutów zawierających podaną wartość choć w części (np. w środku – a[href*="on"] pasuje do odnośników: …/monitor… oraz …/koncepcja…)
atrybut~=wartość
pasuje do atrybutów zawierających wartość na liście wartości rozdzielonych spacjami (np. p[class~=t1] pasuje do <p class="r1 s2 t1 u3">).
atrybut|=wartość
pasuje do atrybutów zawierających wartość na liście wartości zawierających łączniki (np. p[class|=en] pasuje do <p class="en-GB">).

Selektor ogólny Bug w IE6

Wybiera wszystkie elementy. Jeśli użyty jest samodzielnie, zapisuje się go jako gwiazdkę. Jest domyślnie dołączany do selektorów, które nie określają elementu.

 * {cena: 3gr;}
 Każdy element ma cenę trzy grosze. Pasuje do każdego elementu.

 *.drogie {cena: 100zł;}
 .drogie {cena: 100zł;}
 Obie notacje są poprawne i równoważne (w tym przykładzie brak spacji za * ma znaczenie).

Rzadko się używa selektora ogólnego. W wielu przypadkach nie zmienia on znaczenia całego selektora (jak w przykładzie powyżej).

Kombinatory

Kombinatory pozwalają połączyć kilka prostych selektorów nadając im nowe znaczenie. Można stworzyć kombinacje, jak „tylko elementy x, które są w y” albo „odnośniki sąsiadujące z elementem klasy z”.

Kombinator potomka

Łączy ze sobą (przy pomocy spacji) dwa selektory zawężając działanie drugiego do elementów zawieranych przez pierwszy:

 marchew natka {kolor: zielony;}
 Marchewki nie są całe czerwone. Mają zieloną natkę.

 Pasuje do <marchew><natka/></marchew>. 
 Nie pasuje do <pietruszka><natka/></pietruszka>.

Kombinator potomka pomaga wystylizować wybrane elementy w określonym miejscu strony, np. wszystkie odnośniki w menu.

Kombinator dziecka Bug w IE6

Łączy ze sobą selektory podobnie jak kombinator potomka, ale tylko gdy element drugi jest bezpośrednim potomkiem (tzn. dzieckiem) pierwszego. Jest to znak > między selektorami.

 samochód > lusterko {kolor: lustrzany;}

 Pasuje do <samochód><lusterko/></samochód>. 
 Nie pasuje do <samochód><torebkaPasażerki><lusterko/></torebkaPasażerki></samochód>

Kombinator dziecka działa podobnie jak slash w ścieżkach do plików na dysku. Pozwala wystylizować np. tylko pierwszy poziom zagnieżdżonych list.

Kombinator następnika Bug w IE6

Łączy ze sobą dwa selektory zawężając działanie drugiego do elementów umieszczonych bezpośrednio za pierwszym (nie licząc ewentualnego tekstu między nimi). Jest to znak + między selektorami.

 mój-domek + domek-sąsiada {firanki: zasłonięte;}

 Pasuje do <mój-domek/>pies<domek-sąsiada/>. 
 Nie pasuje do <mój-domek/><pole/><domek-sąsiada/>.

Reguły dotyczą ostatniego ze wskazanych elementów (w przykładzie to domek-sąsiada).

Kombinator ogólny następnika

Łączy ze sobą dwa selektory zawężając działanie drugiego do elementów umieszczonych niebezpośrednio za pierwszym. Jest to znak ~ (tylda) między selektorami.

 skinhead ~ dziadek {reakcja: zniesmaczenie}

 Pasuje do <skinhead/><babcia/><dziadek/>
 Nie pasuje do <dziadek/><skinhead/><babcia/>

Reguły dotyczą ostatniego ze wskazanych elementów (w przykładzie to dziadek).

Łączenie i grupowanie selektorów

Jedna reguła może mieć wiele selektorów. Kolejne selektory oddziela się przecinkiem.

 h1, h2, h3, h4 {font-weight: bold;}
 Pasuje do czterech różnych elementów

Proste selektory można ze sobą łączyć i np. nadać style tylko elementowi, który jednocześnie ma określony identyfikator, kilka klas i jest odpowiedniego typu:

 element.klasa1.klasa2#id:hover:first-letter
 Pasuje tylko do pierwszej litery wskazanego myszą elementu <element/> mającego klasy „klasa1” i „klasa2” (może mieć dodatkowo inne) i identyfikator równy „id”.

Można też łączyć wiele kombinatorów ze sobą i kombinatory z selektorami.

 matrioszka matrioszka matrioszka matrioszka {rozmiar: malutki;}

Ogólnie rzecz biorąc reguły mogą być bardzo rozbudowane i złożone, aby można było wskazać dowolny element bez konieczności dodawania nadmiarowych klas do dokumentu.

Grupowanie selektorów pozwala przypisać te same właściwości różnym elementom. Upraszcza to arkusze stylów i pozwala zaoszczędzić nieco pisania.

Ćwiczenia

Ćwiczenia z selektorów


Zmodyfikowano: 11.02.2015, 04:01
submit