Repozytorium Web Developera

Archiwum z lat 2013-2018, treści mogą być nieaktualne.

Pseudoklasy

Pseudoklasy interfejsu

Pseudoklasy odnośników


a:link {color:black;}
a:visited {color:gray;}
a:hover {text-decoration:none;}
a:active {color:red;}

Pseudoklasy linku muszą ZAWSZE występować w podanej kolejności!

  • :link - odnośnik widnieje na stronie i czeka, aż go ktoś kliknie
  • :visited - użytkownik już wcześniej kliknął odnośnik
  • :hover - nad odnośnikiem znajduje się kursor
  • :active - odnośnik jest właśnie klikany (tj. przycisk myszy jest naciśnięty, ale nie został jeszcze puszczony)

Pseudoklasa :target


<a href="#more_info">Więcej informacji</a>
<h2 id="more_info">To tych informacji szukasz.</h2>
#more_info:target {background:#eee;}

Po kliknięciu na odnośnik, zmienia styl elementu docelowego.

Pseudoklasy formularzy

  • :required - selektor pól opatrzonych atrybutem required
  • :focus:invalid - selektor pól zawierających nieprawidłowe wartości
  • :focus:valid - selektor pól zawierających poprawną wartość
  • :enabled - za pomocą tej pseudoklasy możemy formatować wygląd pól formularza, które są dostępne dla użytkownika strony
  • :disabled - tych pól, których edycja została wyłączona za pomocą atrybutu disabled="disabled"
  • :checked - za pomocą tej pseudoklasy możemy kontrolować wygląd aktywnych pól formularza typu radio lub checkbox

Pseudoklasa :focus


input:focus {border:1px solid blue;}

Kiedy pole jest aktywne, zmienia się obramowanie.

Pseudoklasa placeholder

  • :-ms-input-placeholder
  • ::-moz-placeholder
  • ::-webkit-input-placeholder
  • ::placeholder
Można przypisać inny kolor tekstu gdy okno/input nie zostało jeszcze wybrane.

Pseudoklasy strukturalne

Pseudoklasa :root

Pseudoklasa ta należy do grupy pseudoklas strukturalnych, za pomocą których możemy odwołać się do struktury dokumentu XHTML/HTML będącej poza zasięgiem klasycznych selektorów. Omawiana pseudoklasa odnosi się do korzenia struktury, którym w przypadku dokumentów XHTML/HTML jest element html, i zawsze działa na cały dokument.

Pseudoklasa :empty

Odpowiada za formatowanie tych elementów, które nie posiadają swoich dzieci i nie zawierają innych elementów.

Pseudoklasa :not()

Wybiera elementy z wyłączeniem tych w nawiasie not(). W poniższym przykładzie zostaną wybrane wszystkie elementy formularza oprócz suwaka.

Pseudoklasa ta w nawiasie zawiera argument, który jest selektorem prostym, np. może to być p. Następnie wymusza formatowanie tych elementów, które nie są argumentem zapisanym w nawiasie.


input:not([type="range"]), textarea, select
{
    /* deklaracje */
}

Pseudoklasa :first-child i :last-child


ol.results li:last-child {color:blue;}

Zmienia styl pierwszego lub ostatniego potomka.

Pseudoklasa :nth-child(n)

Wybiera n-ty element, może być wykorzystywany do zwiększania czytelności listy.

  • :nth-child(n)
  • :only-child
  • :nth-last-child(n)
  • :nth-of-type(n)
  • :first-of-type
  • :last-of-type
  • :only-of-type
  • :nth-last-of-type(n)

Pseudoelementy

  • ::first-letter
  • ::first-line
  • ::before
  • ::after

e::first-letter {font-size:300%;}
e::first-line {font-variant:small-caps;}

<p class="age">25</p>
p.age::before {content: "Wiek: ";}
p.age::after {content: " lat.";}