Selektory pseudoklas w CSS

Stronę tą wyświetlono już: 212 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:

Listing 1
  1. a:link{
  2. color: green;
  3. }

:visited

Ten selektor umożliwia sterowanie stylem linku, który został odwiedzony.

Listing 2
  1. a:visited{
  2. color: red;
  3. }

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

Listing 3
  1. div:hover{
  2. background:yellow;
  3. }

Rezultat (najedź myszką na obszar):

:active

Określa style elementu, nad którym został wciśnięty i przytrzymany przycisk myszki.

Listing 4
  1. div:active{
  2. background:yellow;
  3. }

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.

Listing 5
  1. p:first-child{
  2. background:yellow;
  3. }

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.

Listing 6
  1. :lang("pl"){
  2. background: green;
  3. }

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

Listing 7
  1. div:not(.klass){
  2. background: yellow;
  3. }

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.

Komentarze