Introduction to CSS Selectors

TL;DR

Selektory CSS to wzorce, które pozwalają Ci wybierać elementy HTML na stronie, aby je stylować. Zrozumienie, jak działają, jest kluczowe do efektywnego projektowania stron. Istnieje wiele rodzajów selektorów, od prostych po złożone, które pozwalają na precyzyjne celowanie w konkretne elementy.

1. The Mental Model

Wyobraź sobie, że selektory CSS to takie magiczne lupy, którymi wskazujesz przeglądarce, które konkretne części Twojej strony HTML mają zostać zmienione. Bez nich przeglądarka nie wiedziałaby, gdzie zastosować Twoje style.

2. The Core Material

Selektory CSS są fundamentalne do pracy z arkuszami stylów. Pozwalają Ci wybrać jeden lub więcej elementów HTML i zastosować do nich określone reguły CSS. Oto najczęściej używane typy selektorów:

Selektory typów (Type Selectors)

Photo by Marta Nogueira on Pexels

Ten typ selektora wybiera wszystkie elementy danego typu (tagu HTML).

p {
  color: blue;
}

Powyższy kod sprawi, że cały tekst w elementach <p> będzie niebieski.

Selektory klas (Class Selectors)

Photo by Marta Nogueira on Pexels

Selektory klas używają atrybutu class w HTML do grupowania elementów, które mają otrzymać ten sam styl. Możesz przypisać tę samą klasę do wielu elementów, a jeden element może mieć wiele klas. Zaczynają się od kropki ..

<p class="moj-tekst">To jest akapit.</p>
<div class="moj-tekst">To jest div.</div>

.moj-tekst {
  font-family: Arial, sans-serif;
}

Ten styl zostanie zastosowany do obu elementów.

Selektory ID (ID Selectors)

Selektory ID są używane do stylizowania pojedynczego, unikalnego elementu na stronie. ID powinno być unikalne w całym dokumencie HTML. Zaczynają się od hasha #.

<h1 id="naglowek-glowny">Witaj na mojej stronie!</h1>

#naglowek-glowny {
  text-align: center;
  color: green;
}

Tylko ten konkretny nagłówek otrzyma te style.

Selektory uniwersalne (Universal Selector)

Photo by David Eluwole on Pexels

Selektor uniwersalny * wybiera każdy element HTML na stronie. Jest przydatny do ustawiania globalnych stylów bazowych.

* {
  margin: 0;
  padding: 0;
}

To usunie domyślne marginesy i wypełnienia ze wszystkich elementów.

Selektory atrybutów (Attribute Selectors)

Pozwalają na wybranie elementów na podstawie ich atrybutów HTML i/lub ich wartości.

<input type="text">
<input type="submit" value="Wyślij">
<a href="https://example.com" target="_blank">Link</a>

input[type="text"] {
  border: 1px solid grey;
}

a[target="_blank"] {
  color: purple;
}

Selektory potomków (Descendant Selectors)

Wybierają element, który jest potomkiem innego elementu (niekoniecznie bezpośrednim). Używasz spacji między selektorami.

<div>
  <p>Jestem potomkiem diva.</p>
  <span>
    <p>Jestem też potomkiem diva.</p>
  </span>
</div>

div p {
  background-color: yellow;
}

Oba akapity w div otrzymają żółte tło.

Selektory dzieci (Child Selectors)

Wybierają element, który jest bezpośrednim dzieckiem innego elementu. Używasz znaku >.

<ul>
  <li>Element listy</li>
  <li><span>Wewnątrz span</span></li>
</ul>

ul > li {
  list-style-type: square;
}

Tutaj tylko li będące bezpośrednim dzieckiem ul zostanie ostylowane. span nie zostanie dotknięty.

Selektory rodzeństwa (Sibling Selectors)

Istnieją dwa typy:
- Ogólny selektor rodzeństwa (~): Wybiera wszystkie elementy, które są rodzeństwem poprzedniego elementu i występują po nim.
- Bezpośredni selektor rodzeństwa (+): Wybiera tylko pierwszy element, który jest bezpośrednim rodzeństwem poprzedniego elementu i występuje tuż po nim.

<h1>Tytuł</h1>
<p>Pierwszy akapit.</p>
<p>Drugi akapit.</p>
<div>Inny element</div>
<p>Trzeci akapit.</p>

h1 ~ p { /* wszystkie akapity po h1 */
  border-top: 1px solid black;
}

p + p { /* tylko drugi akapit po pierwszym */
  color: red;
}

graph TD
    A["Selektory CSS"] --> B["Proste"]
    A --> C["Złożone"]

    B --> B1["Typu (np. p)"]
    B --> B2["Klasy (np. .moja-klasa)"]
    B --> B3["ID (np. #moje-id)"]
    B --> B4["Uniwersalny (*)"]
    B --> B5["Atrybutu (np. input[type='text'])"]

    C --> C1["Potomka (np. div p)"]
    C --> C2["Dziecka (np. ul > li)"]
    C --> C3["Rodzeństwa (np. h1 ~ p)"]
    C --> C4["Bezpośredniego Rodzeństwa (np. p + p)"]

3. Worked Example

Stwórzmy prostą stronę HTML z różnymi elementami i zastosujmy do nich selektory.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład Selektorów</title>
    <style>
        /* Selektor typu */
        body {
            font-family: sans-serif;
            background-color: #f4f4f4;
            color: #333;
        }

        /* Selektor klasy */
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }

        /* Selektor ID */
        #main-heading {
            text-align: center;
            color: steelblue;
            border-bottom: 2px solid steelblue;
            padding-bottom: 10px;
        }

        /* Selektor potomka */
        div p {
            margin-left: 20px;
            font-style: italic;
        }

        /* Selektor dziecka */
        ul > li {
            list-style-type: disc;
            color: #555;
        }

        /* Selektor atrybutu */
        a[target="_blank"] {
            color: orange;
            text-decoration: none;
        }

        /* Bezpośredni selektor rodzeństwa */
        h2 + p {
            color: darkgreen;
            font-size: 1.1em;
        }
    </style>
</head>
<body>
    <h1 id="main-heading">Wprowadzenie do HTML i CSS</h1>

    <p class="highlight">Ten akapit jest wyróżniony.</p>
    <p>To jest zwykły akapit.</p>

    <div>
        <h2>Co to jest HTML?</h2>
        <p>HTML (HyperText Markup Language) to język znaczników używany do tworzenia struktury stron internetowych.</p>
        <p>To jest kolejny akapit wewnątrz diva, będzie ostylowany.</p>
    </div>

    <h2>Co to jest CSS?</h2>
    <p>CSS (Cascading Style Sheets) to język używany do opisywania prezentacji dokumentu napisanego w języku znaczników.</p>
    <p>Ten akapit jest bezpośrednim rodzeństwem h2, więc będzie zielony.</p>

    <ul>
        <li>Element pierwszy</li>
        <li>Element drugi</li>
        <li>
            <span>Element w span w li (nie zostanie ostylowany selektorem `ul > li`)</span>
        </li>
    </ul>

    <a href="https://www.google.com" target="_blank">Odwiedź Google</a>
    <a href="https://www.bing.com">Odwiedź Bing</a>
</body>
</html>

Po otwarciu tego pliku w przeglądarce zobaczysz, jak różne selektory zastosowały style do poszczególnych elementów, zgodnie z naszymi regułami. Na przykład, główny nagłówek #main-heading będzie wyśrodkowany i niebieski, a akapit tuż po drugim <h2> będzie zielony.

4. Key Takeaways

• Selektory CSS pozwalają Ci precyzyjnie wybierać elementy HTML do ostylowania.
• Selektory typu (tagu), klasy (.) i ID (#) to podstawowe sposoby celowania w elementy.
• Selektory ID powinny być unikalne dla pojedynczych elementów, natomiast klasy mogą być używane wielokrotnie.
• Selektory potomka (spacja) i dziecka (>) pozwalają na stylizowanie elementów w zależności od ich relacji w strukturze HTML.
• Selektory rodzeństwa (+ i ~) są przydatne do stylizowania elementów sąsiadujących.
• Używaj selektorów atrybutów, aby celować w elementy na podstawie ich atrybutów HTML.

Częste błędy do unikania:
- Używanie wielu elementów z tym samym id - id powinno być unikalne na całej stronie.
- Zapominanie o kropce (.) przed nazwą klasy lub hashu (#) przed nazwą ID w CSS.
- Niejasne selektory - zbyt ogólne selektory mogą niechcący zastosować style do niepożądanych elementów.
- Nadmierne poleganie na selektorze uniwersalnym *, co może prowadzić do nieefektywnych stylów i trudności w nadpisywaniu.

5. Now Try It

Stwórz nową stronę HTML. Dodaj do niej nagłówek <h1>, dwa akapity <p> (jeden z klasą ważny-tekst, drugi bez), listę nieuporządkowaną <ul> z trzema elementami <li>, oraz div zawierający akapit. Następnie, w sekcji <style>:
1. Zastosuj do <h1> selektor ID, ustawiając mu kolor tekstu na darkblue i rozmiar czcionki na 2.5em.
2. Użyj selektora klasy, aby akapit o klasie ważny-tekst miał czerwony kolor tekstu i pogrubioną czcionkę.
3. Za pomocą selektora potomka, spraw, by akapit wewnątrz div miał tło w kolorze lightgray i wypełnienie 10px.
4. Wykorzystaj selektor dziecka, aby elementy <li> będące bezpośrednimi dziećmi <ul> miały list-style-type: circle.

Sukcesem będzie strona, gdzie te specyficzne style są poprawnie zastosowane do odpowiednich elementów, co potwierdzi Twoje zrozumienie działania selektorów.