Łączenie selektorów CSS

W poprzednich częściach tego kursu CSS zapoznaliśmy się z selektorami CSS i z prostymi sposobami ich zapisywania, dzięki czemu stało się możliwe definiowanie różnych reguł CSS, czy to w dokumencie HTML, czy też w osobnym kaskadowym arkuszu stylów CSS.

W tej części kursu poznamy kilka sposobów tworzenia i łączenia ze sobą różnych typów selektorów CSS. Do tego celu będziemy wykorzystywać różne selektory elementów, selektory atrybutów, selektory pseudoelementów, selektory pseudoklas.

Wyobraźmy sobie, że każdy człowiek żyjący w naszym państwie jest elementem stanowiącym całość społeczeństwa, a naszym zadaniem jest dokonanie wyboru, na podstawie pewnych kryteriów, z pośród wszystkich żyjących osób.

W pierwszym kroku wybieramy wszystkie osoby płci żeńskiej.
Następnie ze wszystkich osób płci żeńskiej wybieramy kobiety o imieniu Joanna.
Następnie ze wszystkich osób płci żeńskiej o imieniu Joanna wybieramy kobiety w wieku 26 lat.

Nasze kryteria wyboru moglibyśmy coraz bardziej zawężać, aż otrzymalibyśmy grupę osób spełniających wszystkie nasze kryteria.

Podobnie możemy postępować z selektorami CSS. Poprzez łączenie ich ze sobą możemy bardziej precyzyjnej wybierać elementy z dokumentu HTML i przekazywać im nowe właściwości wyglądu.


Jedną z najprostszych reguł CSS jaką możemy stworzyć za pomocą selektora CSS jest reguła utworzona przy pomocy selektora elementu. Taka przykładowa reguła CSS została zaprezentowana poniżej.

p {
  background-color:lightblue;
}

Reguła CSS, którą stworzyliśmy powyżej, odszuka wszystkie elementy p w danym dokumencie HTML i doda do nich właściwość background-color:lightblue; dzięki czemu tło w tych elementach p będzie koloru jasnoniebieskiego.

Przykładowy dokument HTML, wraz z elementami HTML oraz daną regułą CSS, został przedstawiony pod spodem:

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

    <style>
      p {
        background-color:lightblue;
      }
    </style>
  </head>

  <body>

    <p>to jest element - p</p>
    <div>to jest element - div</div>
    <p>to jest element - p</p>

  </body>
</html>

A tak prezentują się wspomniane elementy, po wyświetleniu w oknie przeglądarki internetowej:

to jest element - p

to jest element - div

to jest element - p

Naszą poprzednią regułę CSS rozbudujemy poprzez dodanie do niej przykładowego selektora klasy, czyli .twoja_nazwa

p.twoja_nazwa {
  background-color:lightblue;
}

Reguła CSS, którą stworzyliśmy powyżej, odszuka wszystkie elementy p w danym dokumencie HTML, które będą posiadać atrybut class o wartości twoja_nazwa i doda do nich właściwość background-color:lightblue; dzięki czemu tło w tych elementach będzie koloru jasnoniebieskiego.

Przykładowy dokument HTML, wraz z elementami HTML oraz daną regułą CSS, został przedstawiony pod spodem:

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

    <style>
      p.twoja_nazwa {
        background-color:lightblue;
      }
    </style>
  </head>

  <body>

    <p class="twoja_nazwa">
      to jest element - p - wraz z atrybutem "class" o wartości "twoja_nazwa"
    </p>

    <p class="twoja_nazwa">
      to jest element - p - wraz z atrybutem "class" o wartości "twoja_nazwa"
    </p>

    <div class="twoja_nazwa">
      to jest element - div - wraz z atrybutem "class" o wartości "twoja_nazwa"
    </div>

    <p>
      to jest element - p - bez atrybutu "class"
    </p>

  </body>
</html>

A tak prezentują się wspomniane elementy, po wyświetleniu w oknie przeglądarki internetowej:

to jest element - p - wraz z atrybutem "class" o
wartości "twoja_nazwa"

to jest element - p - wraz z atrybutem "class" o
wartości "twoja_nazwa"

to jest element - div - wraz z atrybutem "class" o
wartości "twoja_nazwa"

to jest element - p - bez atrybutu "class"

Tym razem naszą regułę CSS rozbudujemy poprzez dodanie do niej selektora pierwszego dziecka, czyli :first-child

p.twoja_nazwa:first-child {
  background-color:lightblue;
}

Reguła CSS, którą stworzyliśmy powyżej, odszuka wszystkie elementy p w danym dokumencie HTML, które będą posiadać atrybut class o wartości twoja_nazwa i które będą pierwszym dzieckiem swojego rodzica, a następnie doda do nich właściwość background-color:lightblue; dzięki czemu tło w tych elementach będzie koloru jasnoniebieskiego.

Przykładowy dokument HTML, wraz z elementami HTML oraz daną regułą CSS, został przedstawiony pod spodem:

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

    <style>
      p.twoja_nazwa:first-child {
        background-color:lightblue;
      }
    </style>
  </head>

  <body>

    <p class="twoja_nazwa">
      to jest element - p - wraz z atrybutem "class" o wartości "twoja_nazwa", ponadto ten element - p - jest pierwszym dzieckiem swojego rodzica, czyli elementu - body
    </p>

    <p class="twoja_nazwa">
      to jest element - p - wraz z atrybutem "class" o wartości "twoja_nazwa", jednak nie jest on pierwszym dzieckiem swojego rodzica
    </p>

    <div>
      <p class="twoja_nazwa">
        to jest element - p - wraz z atrybutem "class" o wartości "twoja_nazwa", ponadto ten element - p - jest pierwszym dzieckiem swojego rodzica, czyli elementu - div
      </p>

      <p class="twoja_nazwa">
        to jest element - p - wraz z atrybutem "class" o wartości "twoja_nazwa", jednak nie jest on pierwszym dzieckiem swojego rodzica
      </p>
    </div>

  </body>
</html>

A tak prezentują się wspomniane elementy, po wyświetleniu w oknie przeglądarki internetowej:

to jest element - p - wraz z atrybutem "class" o wartości "twoja_nazwa", ponadto ten element - p - jest pierwszym dzieckiem swojego rodzica, czyli elementu - body

to jest element - p - wraz z atrybutem "class" o wartości "twoja_nazwa", jednak nie jest on pierwszym dzieckiem swojego rodzica

to jest element - p - wraz z atrybutem "class" o wartości "twoja_nazwa", ponadto ten element - p - jest pierwszym dzieckiem swojego rodzica, czyli elementu - div

to jest element - p - wraz z atrybutem "class" o wartości "twoja_nazwa", jednak nie jest on pierwszym dzieckiem swojego rodzica

Naszą poprzednią regułę CSS rozbudujemy poprzez dodanie do niej przykładowego selektora atrybutu o danym początkowym ciągu znaków, czyli [title^="tytuł"]

p[title^="tytuł"].twoja_nazwa:first-child {
  background-color:lightblue;
}

Reguła CSS, którą stworzyliśmy powyżej, odszuka wszystkie elementy p w danym dokumencie HTML, które będą posiadać atrybut class o wartości twoja_nazwa i które będą pierwszym dzieckiem swojego rodzica, oraz które będą posiadały atrybut title o początkowym ciągu znaków tytuł, a następnie doda do nich właściwość background-color:lightblue; dzięki czemu tło w tych elementach będzie koloru jasnoniebieskiego.

Przykładowy dokument HTML, wraz z elementami HTML oraz daną regułą CSS, został przedstawiony pod spodem:

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

    <style>
      p[title^="tytuł"].twoja_nazwa:first-child {
        background-color:lightblue;
      }
    </style>
  </head>

  <body>

    <p title="tytuł elementu" class="twoja_nazwa">
      to jest element - p - wraz z atrybutem "class" o wartości "twoja_nazwa" i atrybutem "title" o początkowym ciągu znaków "tytuł", ponadto ten element - p - jest pierwszym dzieckiem swojego rodzica, czyli elementu - body
    </p>

    <p>to jest element - p</p>

    <p title="tytuł elementu" class="twoja_nazwa">
      to jest element - p - wraz z atrybutem "class" o wartości "twoja_nazwa" i atrybutem "title" o początkowym ciągu znaków "tytuł", jednak ten element - p - nie jest pierwszym dzieckiem swojego rodzica
    </p>

  </body>
</html>

A tak prezentują się wspomniane elementy, po wyświetleniu w oknie przeglądarki internetowej:

to jest element - p - wraz z atrybutem "class" o wartości "twoja_nazwa" i atrybutem "title" o początkowym ciągu znaków "tytuł", ponadto ten element - p - jest pierwszym dzieckiem swojego rodzica, czyli elementu - body

to jest element - p

to jest element - p - wraz z atrybutem "class" o wartości "twoja_nazwa" i atrybutem "title" o początkowym ciągu znaków "tytuł", jednak ten element - p - nie jest pierwszym dzieckiem swojego rodzica

Nasz do tej pory utworzony selektor p[title^="tytuł"].twoja_nazwa:first-child moglibyśmy jeszcze bardziej rozbudować poprzez połączenie kilku selektorów potomka i selektorów dziecka, ale to nie ma większego sensu, bo tak naprawdę nie należy posługiwać się takimi rozbudowanymi selektorami, lecz warto wiedzieć, że taka możliwość istnieje. Należy tworzyć proste reguły CSS wykorzystując do tego celu jeden typ selektora, który odszuka interesujący nas elementu bądź grupę elementów HTML. Do tej zasady należy stosować się wszędzie tam, gdzie jest taka możliwość, dzięki czemu nie skomplikujemy sobie swojej pracy.

Należy pamiętać również o możliwości skorzystania z selektora kilku różnych elementów, który jest zbudowany z kilku różnych selektorów CSS.

Przykładowo tworzymy trzy reguły CSS różniące się od siebie selektorem:

p {

}

#twoja_nazwa {

}

div b > .inna_nazwa {

}

W przypadku gdy będziemy chcieli, aby utworzone przez nas selektory dodawały, do odszukanych elementów HTML, jasnoniebieski kolor tła, to nasze trzy przykładowe reguły CSS możemy uzupełnić w następujący sposób:

p {
  background-color:lightblue;
}

#twoja_nazwa {
  background-color:lightblue;
}

div b > .inna_nazwa {
  background-color:lightblue;
}

Z uwagi, że wszystkie reguły CSS, które zostały utworzone powyżej, mają za zadanie dodać tą samą właściwość CSS, czyli background-color:lightblue; to nasz zapis możemy skrócić do jednej reguły CSS, poprzez oddzielenie poszczególnych selektorów przecinkiem:

p, #twoja_nazwa, div b > .inna_nazwa {
  background-color:lightblue;
}

Reguła CSS, którą stworzyliśmy powyżej:

  • odszuka wszystkie elementy p w danym dokumencie HTML
  • odszuka element HTML, który będzie posiadał atrybut id o wartości twoja_nazwa
  • odszuka każdy element HTML, który będzie posiadał atrybut class o wartości inna_nazwa i który będzie dzieckiem elementu b oraz potomkiem elementu div

Do tych wszystkich elementów HTML, które zostały wymienione powyżej, zostanie dodana właściwość background-color:lightblue; dzięki czemu tło w tych elementach będzie koloru jasnoniebieskiego.

Przykładowy dokument HTML, wraz z elementami HTML oraz daną regułą CSS, został przedstawiony pod spodem:

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

    <style>
      p, #twoja_nazwa, div b > .inna_nazwa {
        background-color:lightblue;
      }
    </style>
  </head>

  <body>

    <div id="twoja_nazwa">
      to jest element - div - wraz z atrybutem "id" o wartości "twoja_nazwa"
    </div>

    <p>to jest element - p</p>

    <div>
      <b>to jest element - b
        <span class="inna_nazwa">
          to jest element - span - wraz z atrybutem "class" o wartości "inna_nazwa", ponadto ten element - span - jest dzieckiem elementu - b - i potomkiem elementu - div
        </span>
      </b>
    </div>

  </body>
</html>

A tak prezentują się wspomniane elementy, po wyświetleniu w oknie przeglądarki internetowej:

to jest element - div - wraz z atrybutem "id" o wartości "twoja_nazwa"

to jest element - p

to jest element - b to jest element - span - wraz z atrybutem "class" o wartości "inna_nazwa", ponadto ten element - span - jest dzieckiem elementu - b - i potomkiem elementu - div

Więcej o innych selektorach CSS dowiesz się w momencie ich poznawania, czyli w momencie zapoznania się z częścią przeznaczoną na owe selektory CSS.

W następnej części kursu CSS przeanalizujemy wszystkie dotychczasowe sposoby formatowania wyglądu elementów HTML i przyjrzymy się, które sposoby mają pierwszeństwo przed pozostałymi.