Stronę tą wyświetlono już: 3590 razy
Wstęp
Selektory pseudoklas to elementy języka CSS, które umożliwiają sterowanie wyglądem danego elementu, gdy spełnione zostaną pewne z góry określone warunki. Do tych warunków może należeć np. zmiana koloru linku, gdy ten został już odwiedzony, zmiana koloru tła elementu, na który najechano myszką itd. Selektory wyróżniają się w kodzie tym, że zaczynają się od znaku dwukropka.
Podstawowe selektory
:link
Selektor ten jest przeznaczony tylko dla znaczników <a> i dotyczy on stylu linku, który nie został odwiedzony. Oto przykładowy kod CSS:
:visited
Ten selektor umożliwia sterowanie stylem linku, który został odwiedzony.
:focus
Selektor ten umożliwia ustawianie styli elementów formularza i menu strony, gdy te otrzymują fokus (obsługę klawiatury).
:hover
Style tego selektora stosowane są, gdy kursor myszki najedzie na obiekt.
Rezultat (najedź myszką na obszar):
:active
Określa style elementu, nad którym został wciśnięty i przytrzymany przycisk myszki.
Rezultat (najedź myszką na obszar, wciśnij i przytrzymaj lewy przycisk myszy):
:first-child
Selektor ten ustawia style elementu, który jest pierwszym potomkiem elementu nadrzędnego.
Rezultat:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis convallis libero, nec ornare elit. Duis ullamcorper ac nibh et pharetra. Nunc venenatis elit sit amet mauris porttitor consequat. Cras viverra ligula ut massa malesuada venenatis. Aenean pellentesque, leo eget maximus accumsan, magna lorem lobortis dui, interdum vehicula est elit eget sem. Proin id interdum metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam luctus nisi id maximus pharetra. Phasellus interdum porta justo, ut imperdiet massa laoreet eu. Sed lectus sapien, euismod nec risus sit amet, scelerisque pretium augue.
Praesent iaculis lectus id aliquam sagittis. Integer lobortis dui in urna tempus, id posuere urna pharetra. Nunc risus arcu, varius ut turpis ac, dignissim commodo odio. Sed elit lectus, ultricies eu metus sed, finibus semper sem. Aenean sagittis, enim viverra viverra aliquam, dui lorem efficitur turpis, vitae porttitor diam tellus sit amet elit. Sed vehicula hendrerit risus. Quisque eget sem elit. Sed finibus felis malesuada nulla maximus, quis vulputate est varius. Aliquam eget arcu in metus bibendum blandit a in quam. Morbi blandit lectus sodales, viverra dui scelerisque, tincidunt libero. Quisque scelerisque lobortis ipsum rutrum iaculis. In viverra ipsum odio, sit amet vehicula ex pretium at. Praesent dignissim semper lacinia. Vestibulum lobortis leo vitae velit elementum, ac tristique nisl consequat.
Selektory CSS3
:checked
Selektor ten ustawia style elementu formularza radio lub checkbox, który został zaznaczony.
:disabled
Selektor ten ustawia style nieaktywnych elementów formularza, czyli tych, dla których atrybut disabled został ustawiony na disabled.
:empty
Selektor ten ustawia style elementów strony, które nie mają żadnej zawartości.
:enabled
Selektor ten ustawia style aktywnych elementów formularza, czyli tych, które nie posiadają atrybutu disabled.
:first-of-type
Selektor ustawia style dla pierwszego napotkanego elementu potomnego danego typu.
:lang()
Selektor ustawia style dla każdego elementu zawierającego atrybut lang o podanej wartości.
:last-child
Selektor ustawia style dla ostatniego potomka elementu nadrzędnego.
:last-of-type
Selektor ustawia style dla ostatniego napotkanego elementu potomnego danego typu.
:not()
Selektor ten ustawia style dla elementów, które nie spełniają określonego warunku.
Powyższy kod spowoduję zmianę koloru tła dla wszystkich elementów, dla których atrybut class nie został ustawiony na wartość .klass.
:nth-child()
Selektor ten ustawia style dla elementów potomnych według określonego wzoru. Możliwe wartości podane wewnątrz nawiasów ():
- even - zastosowanie styli do parzystych potomków;
- odd - zastosowanie styli do nieparzystych potomków;
- numer_potomka - podanie liczby zastosuje styl dla podanego numeru potomka;
- przesunięcie+numer_pierwszego - styl będzie stosowany do potomków co przesunięcie licząc od numeru pierwszego potomka.
:nth-last-child()
To samo co :nth-child(), tylko że w drugą stronę.
:nth-last-of-type()
To samo co :nth-last-child(), tylko że dla podanego typu elementu.
:nth-of-type()
To samo co :nth-last-of_type(), tylko że od początku elementu nadrzędnego.
:only-child
Stosuje style do elementów, które są jedynym dzieckiem elementu nadrzędnego.
:only-of-type
Stosuje style do elementów, które są jedynym dzieckiem podanego typu elementu nadrzędnego.
:root
Style dla elementu znajdującego się najwyżej w dokumencie, którym powinien być znacznik <html>.
: target
Stosuje style dla aktualnie wskazanej w adresie strony etykiety.
Selektory CSS4
:default
Style dla elementów formularza, które są domyślnie zaznaczone. Dotyczy to następujących elementów formularza:
- wszystkie elementy z atrybutem checked o wartości ustawionej na checked;
- wszystkie elementy z atrybutem selected o wartości ustawionej na selected;
- pierwszy element formularza input typu submit lub image
:in-range
Style dla elementów formularza input typu rangle lub number.
:indeterminate
Style dla elementów, którym nie zostały ustawione wymagane atrybuty.
:optional
Style dla elementów formularza, które nie mają atrybutu required ustawionego na wartość required.
:out-of-range
Style dla elementów formularza input typu rangle lub number stosowane wtedy, gdy podana przez użytkownika wartość jest niepoprawna.
:read-only
Style dla elementów formularza, które mają ustawiony atrybut readonly na wartość readonly.
:read-write
Style dla elementów formularza, które są edytowalnymi polami do odczytu.
:required
Style dla elementów formularza, które są wymagana i mają ustawiony atrybut required na wartość required.