Typy selektorów CSS

W tej części kursu CSS poznamy podstawowe informacje na temat różnych rodzai selektorów CSS, inaczej mówiąc poznamy różne typy selektorów CSS.

Z pierwszym typem selektorów CSS mogliśmy się już zetknąć w poprzednich częściach tego działu kursu CSS, gdy wykorzystywaliśmy selektor elementu w naszych regułach CSS. Selektor elementu należy do typu selektorów CSS, które możemy nazwać w ten sam sposób, jak wspomniany selektor CSS, a więc typem tym są Selektory elementów.

Selektory elementów zazwyczaj służą nam do wskazania bezpośrednio danego elementu (uwzględniając jego nazwę) np. div, p, body, jednak kilka z nich odszukuje dany element HTML na podstawie hierarchii w kodzie HTML, tzn. na podstawie informacji o tym czy dany element jest potomkiem, dzieckiem, czy bratem lub jednym z braci określonego elementu HTML.

Innym selektorem CSS, który znajduje się w grupie selektorów elementu jest selektor uniwersalny, który służy do wskazania wszystkich elementów HTML (możemy go również wykorzystać do wskazania wszystkich potomków, dzieci, braci danego elementu HTML, przykładowo łącząc ze sobą selektor elementu, selektor dziecka oraz selektor uniwersalny, np. div > * dzięki czemu nasz przykładowy selektor odszuka wszystkie elementy dzieci elementu div).

Innymi selektorami CSS, które należą do grupy selektorów elementu są selektor identyfikatora oraz selektor klasy. Wspomniane selektory tak naprawdę odszukują dany element HTML na podstawie jego wartości atrybutu id lub atrybutu class, jednak ich zapis został skrócony do jednego znaku czyli # (selektor identyfikatora) lub . (selektor klasy).

Przykładowy selektor CSS należący do selektorów elementu został zastosowany w przykładzie, który znajduje się poniżej, natomiast przykłady z pozostałymi selektorami CSS należącymi do wspomnianego typu selektorów CSS możesz znaleźć w części przeznaczonej na opis Selektorów elementów.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      /* selektor dziecka */
      ul > li {
        color:red;
      }
    </style>
  </head>

  <body>

    <ol>
      <li>to jest przykładowy element - li</li>
      <li>to jest przykładowy element - li</li>
      <li>to jest przykładowy element - li</li>
    </ol>

    <ul>
      <li>to jest przykładowy element - li</li>
      <li>to jest przykładowy element - li</li>
      <li>to jest przykładowy element - li</li>
    </ul>

  </body>
</html>

Selektor ul > li odszuka wszystkie elementy HTML typu li, które są dziećmi elementu HTML typu ul.

Rezultat:

  1. to jest przykładowy element - li
  2. to jest przykładowy element - li
  3. to jest przykładowy element - li
  • to jest przykładowy element - li
  • to jest przykładowy element - li
  • to jest przykładowy element - li

Kolejnym typem selektorów CSS są Selektory atrybutów. Jak sama nazwa wskazuje, selektory atrybutów służą do odszukania danego elementu HTML na podstawie jego nazwy atrybutu lub na podstawie wartości jaka została użyta w danym atrybucie danego elementu HTML.

Przykładowy selektor CSS należący do selektorów atrybutów został zastosowany w przykładzie, który znajduje się poniżej, natomiast przykłady z pozostałymi selektorami CSS należącymi do wspomnianego typu selektorów CSS możesz znaleźć w części przeznaczonej na opis Selektorów atrybutów.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      /* selektor atrybutu */
      [title] {
        color:red;
      }
    </style>
  </head>

  <body>

    <ol>
      <li>to jest przykładowy element - li</li>
      <li title="element listy ol">to jest przykładowy element - li</li>
      <li>to jest przykładowy element - li</li>
      <li title="kolejny element listy ol">to jest przykładowy element - li</li>
    </ol>

  </body>
</html>

Selektor [title] odszuka wszystkie elementy HTML, które zawierają w sobie atrybut title.

Rezultat:

  1. to jest przykładowy element - li
  2. to jest przykładowy element - li
  3. to jest przykładowy element - li
  4. to jest przykładowy element - li

Kolejnym typem selektorów CSS są Selektory pseudoelementów. Jak sama nazwa wskazuje, selektory pseudoelementów służą do odszukania różnego rodzai pseudoelementów HTML, czyli takich elementów HTML, które tak naprawdę nie występują w naszym kodzie dokumentu HTML, jednak które możemy utworzyć oraz wskazać za pomocą wspomnianych selektorów pseudoelementów, oraz do których możemy również dodać różne właściwości CSS (czasami nie wszystkie), tak jak do "zwyczajnych" elementów HTML, które znajdują się w kodzie naszego dokumentu HTML.

Przykładowy selektor CSS należący do selektorów pseudoelementów został zastosowany w przykładzie, który znajduje się poniżej, natomiast przykłady z pozostałymi selektorami CSS należącymi do wspomnianego typu selektorów CSS możesz znaleźć w części przeznaczonej na opis Selektorów pseudoelementów.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      /* selektor pierwszej litery tekstu */
      li:first-letter {
        color:red;
      }
    </style>
  </head>

  <body>

    <ol>
      <li>to jest przykładowy element - li</li>
      <li>to jest przykładowy element - li</li>
      <li>to jest przykładowy element - li</li>
    </ol>

  </body>
</html>

Selektor li:first-letter dodana właściwość color:red; do pierwszej litery tekstu w każdym elemencie HTML typu li.

Podobny efekt możemy uzyskać umieszczając pierwszą literę tekstu danego elementu HTML w osobnym elemencie HTML, do którego należy dodać właściwość color:red; jednak tego typu czynność nie musimy wykonywać, dzięki temu że istnieje selektor :first-letter

Rezultat:

  1. to jest przykładowy element - li
  2. to jest przykładowy element - li
  3. to jest przykładowy element - li

Ostatnim typem selektorów CSS są Selektory pseudoklas. Selektory pseudoklas służą do odszukania danego elementu HTML na podstawie różnych kryteriów, np. na podstawie tego czy dany element jest pierwszym dzieckiem, ostatnim dzieckiem, lub którymkolwiek z dzieci. Selektory pseudoklas mogą dodać właściwości CSS do danego elementu HTML na podstawie różnych sytuacji, np. w momencie gdy najedziemy na dany element kursorem myszki. Selektory pseudoklas również w dużej mierze zawierają w sobie selektory, które służą do odszukania różnych elementów formularza HTML (na podstawie ich różnych atrybutów i wartości, np. na podstawie czy dany element formularza został wyłączony, czyli czy posiada on atrybut disabled o wartości disabled (selektor :disabled)).

Przykładowy selektor CSS należący do selektorów pseudoklas został zastosowany w przykładzie, który znajduje się poniżej, natomiast przykłady z pozostałymi selektorami CSS należącymi do wspomnianego typu selektorów CSS możesz znaleźć w części przeznaczonej na opis Selektorów pseudoklas.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      /* selektor pierwszego dziecka */
      li:first-child {
        color:red;
      }
    </style>
  </head>

  <body>

    <ol>
      <li>to jest przykładowy element - li</li>
      <li>to jest przykładowy element - li</li>
      <li>to jest przykładowy element - li</li>
    </ol>

    <ul>
      <li>to jest przykładowy element - li</li>
      <li>to jest przykładowy element - li</li>
      <li>to jest przykładowy element - li</li>
    </ul>

  </body>
</html>

Selektor li:first-child odszuka wszystkie elementy HTML typu li, które są pierwszym dzieckiem swojego elementu rodzica.

Rezultat:

  1. to jest przykładowy element - li
  2. to jest przykładowy element - li
  3. to jest przykładowy element - li
  • to jest przykładowy element - li
  • to jest przykładowy element - li
  • to jest przykładowy element - li

W następnej części kursu CSS poznamy kilka sposobów łączenia ze sobą różnych typów selektorów CSS.