Blog webdeveloperski Patryk yarpo Jar

Pseudo-klasy i pseudo-elementy w CSS

Autor wiadomości Maj 28, 2013

CSS pozwala na definiowanie wyglądu strony i radzi sobie z tym całkiem nieźle. Pozwala na "uchwycenie" za pomocą odpowiedniego selektora elementu (lub zbioru elementów) i przypisanie do niego odpowiedniej reguły CSS. Są jednak takie elementy na stronie, których na próżno szukać w kodzie - choćby łącze (znacznik <a/>) nad którym znajduje się kursor. Element ten w kodzie HTML nie zmienił się, a często jego wygląd uległ zmianie. Jak to się stało? Tu w grę wchodzą pseudo-klasy oraz pseudo-elementy.

Pseudo-klasy

Najbardziej popularnymi pseudo-klasami są te związane z obsługą hiperłączy. Pewnie nie raz widziałeś, gdy link do podstrony, którą już przeczytałeś zmieniał swój wygląd. Choćby na tym blogu po najechaniu na linki po prawej stronie kolor tekstu stanie się jaśniejszy.

Selektory pseudo-klas pozwalają na określanie stylów dla elementów, których nie da się znaleźć w kodzie HTML wprost. Ich "istnienie" wynika z pewnych konkretnych chwilowo zaistniałych warunków - jak choćby wspomniane najechanie na łączę.

Oczywiście można zrezygnować z wykorzystania selektorów pseudo-klas i wykorzystywać klasy, np.:

<a href='index.php' class='visited'>Home</a>

Jawnie zdefiniowaną klasę można ustawiać choćby po stronie serwera pamiętając w sesji jakie strony użytkownik już oglądał. Jednak po co? Po co to robić, skoro ten mechanizm jest wbudowany w każdą nowoczesną przeglądarkę w postaci pseudo-klasy `:visited'.

HTML:

<a href='index.php'>Home</a>

CSS:

a:visited { color: silver; }

Dzięki takiej regule każde odwiedzone  łącze będzie miało siwy kolor tekstu.

Pseudo-klasy odnośników

  • :link - odnosi się do każdego znacznika <a/> posiadającego atrybut `href' wskazujący na nieodwiedzoną stronę.
  • :visited - linki do odwiedzonych stron

Pseudo-klasa `:link' może się wydawać w pierwszym momencie zbędna, jednak istnieją sytuacje, w których znacznik <a/> może nie mieć atrybuty `href', a jednocześnie nadal być bardzo przydatnym:

<a name='kotwica'>Jeśli wpiszesz w adresie #kotwica zostaniesz przesunięty w to miejsce</a>

Choć można dla tego samego efektu użyć dowolnego elementu z określonym atrybutem `id':

<h1 id='kotwica'>Jeśli wpiszesz w adresie #kotwica zostaniesz przesunięty w to miejsce</h1>

Pseudo-klasy dynamiczne

  • :focus - element, który aktualnie może przyjmować dane z klawiatury lub zostać w jakiś inny sposób aktywowany (może się początkowo mylić z pseudo-klasą `:active', ale to nie to samo)
  • :hover - nad elementem jest kursor myszy
  • :active - element właśnie w tym momencie jest aktywowany - np. dokładnie teraz wciśnięte hiperłącze (stan najczęściej bardzo ulotny)

Elementy te od samego początku swojego istnienia były silnie związane z hiperłączami, choć nie oznacza to, że w nowoczesnych przeglądarkach nie można ich używać do innych elementów niż <a/>. Jeśli jednak (to już chyba nie ma miejsca?) ktoś musi nadal tworzyć pod IE < 8, to mogą go spotkać niemiłe niespodzianki:

Warto tu wspomnieć o tym, że pseudo-klasy w selektorach można łączyć ze sobą, np.:

a:visited:hover { color: blue; }
div#bottom span.interesting a[href='http://interesting.com']:hover { color: red; }

Kolejność pseudo-klas (LVHA rule)

Istnieje kilka zasad z tym związanych, które postaram się opisać w niedługim czasie w osobnym poście. Póki co odsyłam do anglojęzycznego wpisu na blogu Meyera:

Inne pseudo-klasy

  • :first-child - pierwsze dziecko elementu,
  • :last-child - ostatnie dziecko
<div>
    <p>Jestem pierwszym dzieckiem elementu `div'. (czerwony)</p>
    <p>Jestem drugim dzieckiem elementu `div'. (domyślny)</p>
</div>

Aby sprawić, by <p/> być czerwony można napisać w CSS:

div p:first-child { color: red; }

demo online

Listę pseudo-klas (w tym także tych z CSS 3) znaleźć można na stronie W3C:

Pseudo-elementy

Pseudo-elementy pozwalają wstawiać do dokumentu fikcyjne elementy. Istnieją 4 pseudo-elementy:

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

Notacja z podwójnym dwukropkiem nie jest przypadkowa, choć nie jest także wymagana. Zapis z pojedynczym dwukropkiem także starczy.

Tak jak w przypadku pseudo-klas można byłoby to rozwiązać "ręcznie" (i często się tak robiło dawniej, gdy nie wszystkie przeglądarki poprawnie obsługiwały - wtedy - "nowości"):

<before></before><p><first-line><first-letter>T</first-letter>o jest moja pierwsza linia<br /></first-line>
To jest druga linia.</p><after></after>

Gdyby zawsze wstawiać takie dodatkowe elementy (one nie istnieją, pokazują jedynie, do jakich fragmentów strony odnoszą się listowane pseudo-elementy) można byłoby zrezygnować z wykorzystywania pseudo-elementów. Czy jednak ktokolwiek uważa, że pokazany przykład jest czytelniejszy od:

<p>To jest moja pierwsza linia<br />
To jest druga linia.</p>

Chyba nie ;).

Pseudo-elementy `::first-line' oraz `::first-letter' pozwalają na odpowiednie ostylowanie wyglądu czy to pierwszej linii tekstu węzła, czy to pierwszej litery.

::before, ::after i właściwość `content'

Zdecydowanie najczęstszym wykorzystaniem pseudo-klas `::before' oraz `::after' jest wstawienie jakiejś treści przed lub po elemencie spełniającym zadane warunki, np.:

div#bottom a[href^='http://']::after {
    content: ' (poza tą stroną)';
    color: red;
}

HTML:

<div id='bottom'>
    <a href="index.php">home</a>
    <a href="http://yarpo.pl">yarpo.pl</a>
</div>

demo online

Po więcej przykładów odsyłam do wiki W3C. Przyjemnej zabawy z kodem 🙂

Warto zobaczyć:

Komentarze (2) Trackbacks (0)
  1. Dzięki z a wyjaśnienie tego zagadnienia, sposoby pokazane w tym artykule znacznie ułatwiają prace z plikami css. W internecie brakuje tego typu wiadomości.

  2. Ciesze sie, ze komus przydaja sie moje wypociny 😉

    Pozdrawiam
    Patryk


Leave a comment

 

Brak trackbacków.