Kilka wskazówek oraz ciekawostek - Selektory CSS

W tej części kursu CSS zostaną zaprezentowane wskazówki oraz ciekawostki, które będą dotyczyły selektorów CSS.

Wykorzystanie selektora uniwersalnego

Czasami może zdarzyć się taka sytuacja, gdy będziemy chcieli, aby nasz selektor odszukał wszystkie elementy HTML obojętnie jakiego typu, które będą dziećmi innego elementu HTML.

<body>

  <div>
    <div>ten element - div - jest pierwszym dzieckiem elementu - div</div>
    <p>ten element - p - jest drugim dzieckiem elementu - div</p>
    <div>ten element - div - jest trzecim dzieckiem elementu - div</div>
  </div>

</body>

Właśnie w tym momencie może przydać się nam selektor uniwersalny.

Tworzymy następującą regułę CSS:

div > * {
  border:1px solid #000;
}

Selektor div > * odszuka wszystkie elementy dzieci elementu div i doda do nich właściwość border, która określa styl wyglądu obramowania elementu HTML.

A o to rezultat:

ten element - div - jest pierwszym dzieckiem elementu - div

ten element - p - jest drugim dzieckiem elementu - div

ten element - div - jest trzecim dzieckiem elementu - div

Selektor elementu, element "html" oraz "body"

Przykładowo, sam selektor elementu możemy wykorzystać do nadania jednakowych wartości różnych właściwości CSS dla wszystkich elementów HTML, które znajdą się na naszej stronie internetowej. Mowa tu o właściwościach CSS, które mogą być dziedziczone.

Tworzymy następującą regułę CSS:

html {
  font-size:120%;
}

Od tej pory do wszystkich elementów umieszczonych w elemencie html zostanie dodana właściwość font-size wraz z wartością 120%, dzięki czemu rozmiar czcionki tekstu we wszystkich elementach, które znajdą się na naszej stronie internetowej, będzie wynosił 120% domyślnego rozmiaru czcionki tekstu, jaka została określona w ustawieniach przeglądarki internetowej.

Wspomniana zależność nie tyczy się elementów HTML, które domyślnie mają określoną wartość właściwości CSS, którą chcielibyśmy zmienić we wcześniej zaprezentowany sposób. Tak więc reguła html { font-size:120%; } nie będzie miała wpływu, np. na elementy h1, h2, h3, h4, h5, h6.

Unikatowy selektor identyfikatora

Pamiętaj, że w dokumencie HTML nie mogą znaleźć się atrybuty id o tej samej wartości, ponieważ będzie to traktowane jako błąd.

Zapis przedstawiony poniżej jest błędnym zapisem.

<body>

  <p id="akapit">przykładowy element - p - z atrybutem "id" o wartości "akapit"</p>
  <p id="akapit">kolejny przykładowy element - p - z atrybutem "id" o wartości "akapit"</p>

</body>

Przyjazny selektor klasy

W jednym dokumencie HTML może znaleźć się nieograniczona liczba atrybutów class o tej samej wartości, co więcej, jeden element HTML może zawierać jeden atrybut class z wieloma różnymi wartościami, oddzielonymi od siebie spacją.

Wspomniane sytuacje zostały zaprezentowane we fragmencie dokumentu HTML, który znajduje się poniżej:

<body>

  <p class="akapit">przykładowy element - p - z atrybutem "class" o wartości "akapit"</p>
  <p class="akapit">kolejny przykładowy element - p - z atrybutem "class" o wartości "akapit"</p>
  <p class="akapit temat-1 blok-4">przykładowy element - p - którego wartościami atrybutu "class" są wartości: "akapit", "temat-1", "blok-4"</p>

</body>

Grupowanie selektorów oraz reset CSS

Selektor kilku różnych elementów nie jest tak naprawdę jakimś nowym typem selektora CSS, lecz jest to raczej techniką zwaną grupowanie selektorów. Możemy ją wykorzystać do nadania tych samych wartości właściwości CSS dla różnych typów elementów HTML, odszukanych za pomocą innych selektorów CSS.

Przykładowa reguła CSS:

h1, h2, h3, h4, h5, h6 {
  font-size:24px;
}

Od tej pory wszystkie elementy h1, h2, h3, h4, h5, h6 w dokumencie HTML będą posiadały właściwość font-size wraz z wartością 24px, dzięki czemu ich rozmiar czcionki tekstu będzie wynosił 24 piksele.

Grupowanie selektorów jest wykorzystywane w technice - Reset CSS.

Problemy selektora potomka

Gdy zdecydujemy się zastosować selektor potomka w naszym kodzie, to musimy pamiętać o jednej rzeczy, ponieważ może on nam zrodzić pewien problem.

Przyjrzyjmy się następującemu układowi elementów HTML.

<body>

  <ul>
    <li>dział - 1</li>
    <li>dział - 2</li>

    <li>dział - 3
      <ul>
        <li>temat - 1</li>
        <li>temat - 2</li>
        <li>temat - 3</li>
      </ul>
    </li>

    <li>dział - 4</li>
    <li>dział - 5</li>
  </ul>

</body>

Układ elementów HTML, który został zaprezentowany powyżej, prezentuje zagnieżdżenie jednej listy HTML (ul) w drugiej liście HTML (ul), a raczej w jej elemencie li.

W momencie gdy utworzymy następującą regułę CSS ul li { color:#F00; }, to selektor ul li będzie odwoływał się do elementów li, które znajdują się zarówno w pierwszej jak i w drugiej, czyli zagnieżdżonej liście HTML, co w efekcie da nam następujący rezultat:

  • dział - 1
  • dział - 2
  • dział - 3
    • temat - 1
    • temat - 2
    • temat - 3
  • dział - 4
  • dział - 5

A co gdybyśmy chcieli, aby nasz selektor odwoływał się tylko do elementów li umieszczonych w zagnieżdżonej liści HTML i zmieniał ich kolor tekstu, na kolor czerwony?

Jak poradzić sobie z taką sytuacją?

Jednym ze sposobów jest użycie selektora dziecka, o którym dowiesz się w następnej wskazówce.

Precyzyjny selektor dziecka

Selektor dziecka może przydać się nam, gdy będziemy chcieli "precyzyjnej" odszukać dane elementy HTML.

Przykładem mogą być elementy li znajdujące się w zagnieżdżonej liście HTML (ul). Wspomniana sytuacja została zaprezentowana poniżej:

<body>

  <ul>
    <li>dział - 1</li>
    <li>dział - 2</li>

    <li>dział - 3
      <ul>
        <li>temat - 1</li>
        <li>temat - 2</li>
        <li>temat - 3</li>
      </ul>
    </li>

    <li>dział - 4</li>
    <li>dział - 5</li>
  </ul>

</body>

Aby odwołać się tylko do elementów li, zaznaczonych powyżej, tworzymy następującą regułę CSS:

ul > li > ul > li {
  color:#F00;
}

Selektor ul > li > ul > li wyszukuje każdy element li, który jest dzieckiem elementu ul, którego rodzic li jest z kolei dzieckiem elementu ul.

W efekcie uzyskamy następujący rezultat:

  • dział - 1
  • dział - 2
  • dział - 3
    • temat - 1
    • temat - 2
    • temat - 3
  • dział - 4
  • dział - 5

Przydatny selektor brata

Jeżeli chcielibyśmy, aby nasz selektor odszukał trzeci element, np. w liście HTML, oraz aby nie zawierał on w sobie innych dodatkowych selektorów CSS, np. :nth-child(), selektor identyfikatora, selektor klasy, to możemy skorzystać z selektora brata oraz innych selektorów elementów oraz selektora :first-child, który odszukuje pierwsze dziecko danego elementu HTML.

<body>

  <ul>
    <li>dział - 1</li>
    <li>dział - 2</li>
    <li>dział - 3</li> <!-- pierwszy brat drugiego elementu - li -->
    <li>dział - 4</li>
    <li>dział - 5</li>
  </ul>

</body>

Tworzymy regułę CSS, która na pierwszy rzut oka może wydawać się dość dziwna:

ul > *:first-child + * + * {
  color:#F00;
}

Selektor ul > *:first-child + * + * odszukuje pierwsze dziecko elementu ul, następnie pierwszego brata oraz następnego brata i to właśnie do tego elementu zostaje dodana właściwość color:#F00;

W efekcie uzyskamy następujący rezultat:

  • dział - 1
  • dział - 2
  • dział - 3
  • dział - 4
  • dział - 5

Wskazówkę tę należy traktować jako ciekawostkę.

Pomocny selektor braci

Jeżeli chcielibyśmy, aby nasz selektor odszukał wszystkie elementy HTML licząc od trzeciego elementu, np. w liście HTML, oraz aby nie zawierał on w sobie innych dodatkowych selektorów CSS, np. :nth-child(), selektor identyfikatora, selektor klasy, to możemy skorzystać z selektora braci oraz innych selektorów elementów oraz selektora :first-child, który odszukuje pierwsze dziecko danego elementu HTML.

<body>

  <ul>
    <li>dział - 1</li>
    <li>dział - 2</li>
    <li>dział - 3</li> <!-- pierwszy brat drugiego elementu - li -->
    <li>dział - 4</li>
    <li>dział - 5</li>
  </ul>

</body>

Tworzymy regułę CSS:

ul > *:first-child + * + * ~ * {
  color:#F00;
}

Selektor ul > *:first-child + * + * ~ * odszukuje pierwsze dziecko elementu ul, następnie pierwszego brata oraz następnego brata oraz wszystkich następnych braci i to właśnie do tych elementów zostaje dodana właściwość color:#F00;

W efekcie uzyskamy następujący rezultat:

  • dział - 1
  • dział - 2
  • dział - 3
  • dział - 4
  • dział - 5

Wskazówkę tę należy traktować jako ciekawostkę.

Niepozorny selektor atrybutu o danej wartości

Zazwyczaj, żeby odwołać się do elementów HTML, zaprezentowanych poniżej, tworzymy reguły CSS, składające się z selektora identyfikatora lub selektora klasy.

<body>

  <p id="akapit">ten element - p - zawiera w sobie atrybut "id" o wartości "akapit"</p>
  <p class="akapit">ten element - p - zawiera w sobie atrybut "class" o wartości "akapit"</p>

</body>

Nasze reguły CSS:

#akapit {
  color:#F00;
}

.akapit {
  background-color:gold;
}

Jako ciekawostkę, należy zapamiętać, że do naszych przykładowych elementów zawierających atrybuty id oraz class o wartości akapit, możemy odwołać się również w następujący sposób:

[id="akapit"] {
  color:#F00;
}

[class="akapit"] {
  background-color:gold;
}

Co w efekcie da nam następujący rezultat:

ten element - p - zawiera w sobie atrybut "id" o wartości "akapit"

ten element - p - zawiera w sobie atrybut "class" o wartości "akapit"

Selektor atrybutu o danym ciągu znaków jako wyróżnik linków

Jeżeli chcielibyśmy wyróżnić w jakiś specjalny sposób linki na naszej stronie internetowej, które prowadzą do określonego serwisu internetowego, to selektor atrybutu o danym ciągu znaków nadaje się do tego celu w sposób idealny.

Przykład:

[href*="webkod.pl"] {
  color:#F00;
}

Selektor [href*="webkod.pl"] odszuka każdy element HTML, który będzie posiadał w sobie atrybut href, którego wartość będzie zawierała w sobie ciąg znaków webkod.pl, a następnie doda do takiego elementu HTML czerwony kolor tekstu.

Przykład:

<body>

  <a href="http://webkod.pl">Darmowy Kurs CSS</a>
  <a href="http://webkod.pl//kurs-css/selektory/atrybuty/selektor-typu-atrybutu">Selektory Atrybutów</a>
  <a href="#">Powrót na górę strony</a>

</body>

Rezultat:

Darmowy Kurs CSS Selektory Atrybutów Powrót na górę strony

Selektory pseudoklasy elementu "a"

Jeżeli chcemy utworzyć regułę CSS odnoszącą się zarówno do odwiedzonych jak i nieodwiedzonych elementów a, to wystarczy, że skorzystamy z selektora elementu i utworzymy następującą regułę CSS:

a {
  color:#000;
}

Tworząc reguły CSS zawierające pseudoklasy określające wygląd tego samego elementu a, w naszym kodzie HTML, należy zachować następującą kolejność:

a:link {
  color:blue;
}

a:visited {
  color:violet;
}

a:focus {
  color:red;
}

a:hover {
  color:black;
}

a:active {
  color:green;
}

Oczywiście niektóre reguły możemy pominąć w naszym kodzie. Zapis przedstawiony poniżej, również będzie poprawny.

a {
  color:blue;
}

a:hover {
  color:black;
}

Selektor ":nth-child()" oraz formatowanie wyglądu elementów tabeli HTML

Selektor :nth-child() idealnie nadaje się do formatowania wyglądu tabeli HTML. Dzięki niemu możemy, w prosty sposób, wyróżnić co drugi wiersz tabeli HTML.

<body>

  <table>
    <tbody>
      <tr>
        <td>komórka - 1</td>
        <td>komórka - 2</td>
        <td>komórka - 3</td>
      </tr>

      <tr>
        <td>komórka - 4</td>
        <td>komórka - 5</td>
        <td>komórka - 6</td>
      </tr>

      <tr>
        <td>komórka - 7</td>
        <td>komórka - 8</td>
        <td>komórka - 9</td>
      </tr>

      <tr>
        <td>komórka - 10</td>
        <td>komórka - 11</td>
        <td>komórka - 12</td>
      </tr>

      <tr>
        <td>komórka - 13</td>
        <td>komórka - 14</td>
        <td>komórka - 15</td>
      </tr>

      <tr>
        <td>komórka - 16</td>
        <td>komórka - 17</td>
        <td>komórka - 18</td>
      </tr>
    </tbody>
  </table>

</body>

Tworzymy następującą regułę CSS:

table > tbody > tr:nth-child(even) {
  background-color:lightblue;
}

Co w efekcie da nam następujący rezultat:

komórka - 1 komórka - 2 komórka - 3
komórka - 4 komórka - 5 komórka - 6
komórka - 7 komórka - 8 komórka - 9
komórka - 10 komórka - 11 komórka - 12
komórka - 13 komórka - 14 komórka - 15
komórka - 16 komórka - 17 komórka - 18

Selektor table > tbody > tr:nth-child(even) odszukuje każdy element tr, który jest parzystym dzieckiem elementu tbody, którego rodzicem jest element table, a następnie dodaje do takiego elementu tr jasnoniebieski kolor tła.

To, które przeglądarki internetowe interpretują selektory typu: :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type() możesz sprawdzić tutaj.

Odróżnienie selektorów pseudoelementów od selektorów pseudoklasy

Gdy wykorzystujemy selektory pseudoelementów oraz selektory pseudoklas, w naszym kodzie, to nie widzimy różnicy w zapisie, pomiędzy nimi, jeżeli nie skorzystamy z drugiego możliwego zapisu selektorów pseudoelementów, czyli z dwóch dwukropek.

Przykład:

div:first-letter {
  color:red;
}

/* Możemy skorzystać z zapisu ::first-letter, który również jest poprawny, lecz tylko dla selektorów pseudoelementów */

div::first-letter {
  color:red;
}

Podsumowanie

W tej części kursu zostały zaprezentowane, wybrane przeze mnie wskazówki oraz ciekawostki, dotyczące różnych selektorów CSS, które czasami mogą przydać się nam w różnych sytuacjach.

Przyszedł czas na podsumowanie całego działu pierwszego, lecz zajmiemy się tym w następnej części.