CSS – pseudo klasy

Ulepszamy wiadomości z selektorów CSS

W normalnym przebiegu przepływu dokumentu style CSS są dodawane na podstawie ich pozycji w drzewie DOM. Jednak czasami model ten nie jest wystarczający, aby sprostać naszym potrzebą . Tutaj z pomocą przychodzą nam pseudo-klasy. Są powiązane z elementami w sposób odmienny, niż przynależność po ich nazwie, atrybutach czy zawartości. W skrócie ujmując nie są ustalane na podstawie drzewa dokumentu.

W jednym z poprzednich artykułów mogliście dowiedzieć się więcej o trzech typach selektorów występujących w CSS:

• generyczne gdzie element p nawiązuje do elementu HTML : <p>
• klasy – gdzie oznaczenie .dnf w CSS nawiązuje do klasy o nazwie dnf : class="dnf" w kodzie HTML
• id – gdzie #dnf w CSS nawiązuje do identyfikatora o nazwie dnf id="dnf" w kodzie HTML
  

Wszystkie wymienione wyżej selektory mogą posiadać pseudo-klasy które są z nimi związane. Pseudo-klasa

• definiuje określony stan elementu
• jest słowem kluczowym zaczynającym się od dwukropka :

#Skłania

Pseudo-klasa nie może istnieć samodzielnie. Musi być przymocowany do selektora. Pseudo-klasa definiuje tylko określony stan tego selektora.

Jej składnia wygląda następująco:

 .selektor:pseudo-klasa{ }

Nie ma miejsca między selektorem a pseudo-klasą, co oznaczałoby, że są one ze sobą połączone.

:hover

Na przykład, często używaną pseudoklasą jest :hover, która zastosuje styl CSS po najechaniu kursorem na element docelowy. Przetestujmy to na linkach.

a{ color: blue;}
a:hover{ color: red;}

Pierwsza linia określa, jak powinny wyglądać wszystkie elementy <a> HTML (kolor niebieski). Druga linia definiuje, jak <a> powinien wyglądać po najechaniu kursorem (czerwony).
Druga linia dotyczy tych samych elementów HTML, ale tylko wtedy, gdy dzieje się coś konkretnego (w tym przypadku jest to najechanie kursora).

:visited

a{ color: dodgerblue;}
a:visited{ color: rebeccapurple;}

<a href="https://www.google.com">Google</a>
<a href="https://twitter.com">Twitter</a>
<a href="https://www.facebook.com">Facebook</a> 
<a href="https://www.mozilla.org">Mozilla</a> 
<a href="https://marksheet.io/visited.html">MarkSheet</a>

Stosowanie innego dla odwiedzanych linków jest często pomijane, ale jest przydatne dla użytkowników przeglądających listę wyników. Z łatwością pomaga im wyobrazić sobie, gdzie już byli.

:focus

Ta pseudoklasa ma miejsce, gdy fokus jest na elemencie HTML. Jest to szczególnie przydatne w przypadku danych wejściowych HTML.

.form-input{ 
   border: 2px solid grey !important; 
   padding: 5px !important;
}
.form-input:focus{ 
   background: lightyellow !important;
   border-color: #80bdff !important; 
   outline: none !important;
}

:first-child and :last-child

Te pseudoklasy są powiązane z hierarchią HTML. Celują w elementy HTML w zależności od kolejności, w jakiej pojawiają się w kodzie.

<ul>
   <li>Jeden</li>
   <li>Dwa</li>
   <li>Trzy</li>
   <li>Cztery</li>
</ul>

li:first-child{ background: Tomato;}
li:last-child{ background: SlateBlue;}

Jak widać, żadna klasa CSS nie jest stosowana do pierwszego i ostatniego <li> . Ich pozycja w hierarchii określa, czy stosowana jest reguła CSS.

Gdybyśmy dodali piąty element listy i używając tego samego kodu CSS, styl zmieniłby się automatycznie:

:nth-child

Ta pseudo-klasa jest bardziej globalną wersją: first-child i: last-child. Z: nth-child, możesz obliczyć, na który element potomny chcesz skierować.

Na przykład, jeśli chcesz kierować reklamy na drugie dziecko, użyj: nth-child (2):

li:nth-child(2){ background: MediumSeaGreen;}

odd and even

Chociaż użycie liczby jest proste, polecenie: nth-child zawiera 2 słowa kluczowe:

• : nth-child (odd) będzie kierować na każdy nieparzysty element
• : nth-child (even) będzie kierować reklamy na każdy parzysty element

li:nth-child(odd){ background: gold;}

Iterator n

Najpotężniejszym aspektem: nth-child jest to, w jaki sposób może kierować elementy na podstawie obliczeń za pomocą słowa kluczowego n.

Wartość n zwiększa się od zera 0 do liczby obecnych elementów podrzędnych.

A co, jeśli chcesz celować w co trzeci element?

li:nth-child(3n){ background: hotpink;}

W naszym przypadku n zaczyna się od zera i kończy na szóstej.

Możesz przeczytać: nth-child (3n) jako „Skieruj na każdy element, którego pozycja jest podzielna przez 3”. W naszym przypadku dotyczyło to zarówno trzeciej, jak i szóstej pozycji listy:

• 3 pomnożone przez 0 którego iloczynem jest 0
• 3 pomnożone przez 1 którego wynikiem jest 3 element
• 3 pomnożone przez 2 którego wynikiem jest 6 element

n + 1

A co, jeśli chcesz kierować reklamy na pierwszy i co trzeci element później?

li:nth-child(3n+1){ background: limegreen;}

3n + 1 składa się z dwóch części:

• 3n wybiera co trzecią pozycję
• +1 przesuwa początek o 1

Oto jak zostały przetworzone obliczenia:

• 3 pomnożone przez 0 plus 1 którego wynikiem jest 1
• 3 pomnożone przez 1 plus 1 którego wynikiem jest 4
• 3 pomnożone przez 2 plus 1 którego wynikiem jest 7

Iterator n jest bardzo wszechstronny. Trudno jest znaleźć właściwe obliczenia, więc po prostu je przetestuj, aby znaleźć właściwy wybór.

Inne pseudoklasy

Dostępne są dziesiątki pseudo-klas, niektóre z nich są przeznaczone dla bardzo specyficznych stanów. Najczęściej używane to te, które omówiliśmy

👇👇👇 Jeżeli podobał Ci się ten artykuł zostaw po sobie ślad w komentarzach 👇👇👇