Co to jest selektor CSS? - Kurs HTML i CSS
Selektory pseudoklas / Odsyłacz podstawowy :linka:link { cecha: wartość } gdzie litera "a" na początku deklaracji, jest selektorem odsyłacza [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Polecenie pozwala nadać określone atrybuty formatowania dla wszystkich podstawowych odsyłaczy na stronie czyli takich, które nie zostały jeszcze odwiedzone przez użytkownika. Ponieważ pseudoklasa :link odnosi się tylko do odsyłaczy, w regule...
- Selektory pseudoklas / Odsyłacz odwiedzony :visited
a:visited { cecha: wartość } gdzie litera "a" na początku deklaracji, jest selektorem odsyłacza [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Polecenie pozwala nadać określone atrybuty formatowania dla wszystkich odsyłaczy, które zostały już odwiedzone przez użytkownika. Ponieważ pseudoklasa :visited odnosi się tylko do odsyłaczy, w regule stylu można pominąć selektor elementu a...
- Selektory pseudoklas / Aktywacja :active
selektor:active { cecha: wartość } Selektorem wg CSS 2 teoretycznie może być dowolny znacznik. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Polecenie pozwala nadać określone atrybuty formatowania dla elementów, które zostały aktywowane przez użytkownika. Może to mieć miejsce np. kiedy użytkownik wciśnie i przytrzyma przycisk myszki na odsyłaczu - aktywacja będzie miała miejsce do momentu zwolnienia przycisku...
- Selektory pseudoklas / Wskazanie myszką :hover
selektor:hover { cecha: wartość } Selektorem wg CSS 2 teoretycznie może być dowolny znacznik. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Polecenie pozwala nadać określone atrybuty formatowania dla elementów, nad którymi znajduje się wskaźnik myszki, kiedy użytkownik jeszcze ich nie kliknął, tzn. nie zostały jeszcze aktywowane. UWAGA! Kolejność deklarowania pseudoklas w arkuszu stylów przypisanych do...
- Selektory pseudoklas / Zogniskowanie :focus
selektor:focus { cecha: wartość } Selektor wskazuje jakiemu elementowi nadajemy formatowanie (dla selektora uniwersalnego są to wszystkie elementy) [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Polecenie pozwala nadać określone atrybuty formatowania dla elementu (np. odsyłacza lub pola formularza), który przyjmuje w danej chwili zogniskowanie. Przykładowo dotyczy to odsyłacza...
- Selektory pseudoklas / Atrybut języka :lang
selektor:lang(język) { cecha: wartość } Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów]. Jako "język" należy wpisać nazwę języka, np. pl - polski, en - angielski). Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Polecenie pozwala nadać określone atrybuty formatowania dla elementów, którym został nadany z poziomu HTML atrybut języka lang="..." [zobacz: Skróty nazw języków]. Różnica...
- Selektory pseudoklas / Łączenie selektorów
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...
- Selektory pseudoklas / Zaznaczenie :checked
(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome) selektor:checked { cecha: wartość } Selektorem mogą być pola formularza: wyboru, opcji oraz opcje listy rozwijalnej [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Niektóre z pól formularzy pełnią rolę przełączników - można je zaznaczać i odznaczać. W związku z tym może się okazać przydatne dodatkowe wizualne...
- Selektory pseudoklas / Korzeń :root
...zawiera w sobie (bezpośrednio lub poprzez zagnieżdżenie) wszystkie inne elementy dokumentu. W języku HTML korzeniem jest zawsze element HTML, zatem selektor ten jest w tym przypadku raczej mało przydatny, ponieważ ten sam efekt uzyskamy poprzez użycie najprostszego selektora typu: html { cecha: wartość } Nie zapominajmy jednak, że CSS nadaje się do stylizowania również dokumentów XML, gdzie nie ma żadnego wymogu co do nazwy elementu-korzenia. Przykład :root Po wpisaniu w arkuszu stylów...
- Selektory pseudoklas / Blokada :disabled :enabled
(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome) Pole zablokowane: selektor:disabled { cecha: wartość } Pole odblokowane: selektor:enabled { cecha: wartość } Selektorem mogą być pola formularza, którym można przypisać atrybut disabled="..." [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Pola formularza mogą znajdować się w wielu stanach - jednym z nich jest...