Zaawansowane selektory CSS

Tworzenie selektorów CSS można zrealizować na wiele sposobów. Oto lista niektórych zaawansowanych selektorów:

* - selektor uniwersalny

Ten selektor działa na każdy element na stronie lub, jeśli jest poprzedzony rodzicem, na każdy element wewnątrz tego rodzica.

* {
  color: red;
}

Tutaj każdy element na stronie dostanie czerwony tekst.

# - selektor identyfikatora

Selektor identyfikatora (ID) wybiera element HTML z określonym identyfikatorem. Zaleca się używanie klas do stylowania, ale czasami można ostylować pojedynczy, unikalny element.

#myid {
  color: red;
}

Ta reguła zmieni kolor tylko jednego elementu: tego z atrybutem id="myid".

element element - selektor potomka

Spacja między selektorami oznacza "wewnątrz": reguła trafi do każdego elementu z drugiego selektora, który leży gdziekolwiek w środku elementu z pierwszego - na dowolnym poziomie zagnieżdżenia.

div p {
  color: brown;
}

Tutaj brązowy będzie każdy akapit leżący w <div>, także zagnieżdżony głębiej, np. w <section> wewnątrz tego diva. Akapity poza divami się nie zmienią. Opisany niżej selektor dziecka > jest węższy: działa tylko na bezpośrednie dzieci.

element + element - selektor sąsiada

Selektor ten odnosi się do sąsiedniego elementu. Wybierze element, który występuje bezpośrednio po wcześniej wymienionym elemencie.

Ten selektor działa na elementach, które sąsiadują ze sobą na tym samym poziomie.

h2 + p {
  font-size: 18px;
}

Tutaj akapit zaraz po nagłówku <h2> będzie miał rozmiar czcionki 18px.

element > element - selektor dziecka

Selektor ten wybiera tylko bezpośrednie dzieci - te, które są dokładnie jeden poziom niżej od selektora rodzica. Nie uwzględnia głębiej zagnieżdżonych elementów.

Ten selektor działa na dzieciach danego elementu, ale nie na dalszych potomkach.

div > p {
    color: blue;
}

Tylko bezpośrednie dzieci <div> zostaną pokolorowane na niebiesko.

element ~ element - selektor ogólnego rodzeństwa

To selektor ogólnego rodzeństwa: wybierze wszystkie elementy, które występują po wcześniej wymienionym elemencie i mają tego samego rodzica - nie muszą stać tuż za nim.

W przeciwieństwie do +, który bierze tylko najbliższego sąsiada, ~ wybiera całe dalsze rodzeństwo.

h2 ~ p {
    font-weight: bold;
}

Wszystkie akapity po nagłówku <h2> na tym samym poziomie zostaną pogrubione.

element[atrybut] / element[atrybut="wartość"]

Selektor atrybutu HTML pozwala ostylować elementy posiadające określony atrybut, np. href, lub te, których wartość atrybutu href jest równa "https://google.com".

W CSS istnieje kilka innych rodzajów selektorów atrybutów, które pozwalają precyzyjnie wybierać i stylizować elementy:

• a[href*="google"] - Gwiazdka (*) oznacza, że określona wartość musi występować gdziekolwiek w wartości atrybutu. Na przykład, ten selektor wybierze wszystkie odnośniki (linki <a>), których atrybut href zawiera słowo "google", niezależnie od tego, czy jest to na początku, w środku czy na końcu wartości atrybutu.

• a[href^="http"] - Symbol ^ oznacza, że określona wartość musi występować na początku wartości atrybutu. Na przykład, ten selektor wybierze wszystkie odnośniki, których atrybut href zaczyna się od "http". Będzie to odnoszone zarówno do "http", jak i "https".

• a[href$=".com"] - Znak dolara ($) oznacza, że określona wartość musi występować na końcu wartości atrybutu. Na przykład, ten selektor wybierze wszystkie odnośniki, których atrybut href kończy się na ".com". Będzie to odnoszone do adresów URL z domeną ".com".

• a[data-kategoria="papirus"] - wybiera elementy, których własny atrybut data-kategoria ma wartość "papirus". Atrybuty data-* możesz wymyślać sam, ale w selektorze podajesz pełną nazwę: CSS nie ma gwiazdki zastępującej część nazwy atrybutu, a zapis [data-*="value"] przeglądarka odczyta jako atrybut data- z operatorem *=.

• a[foo~="bar"] - Symbol tyldy (~) pozwala wybrać atrybut, który ma różne wartości oddzielone spacją. Na przykład, ten selektor wybierze elementy, których atrybut "foo" ma wartość "bar" lub wartość "bar" występuje jako jedno z kilku słów oddzielonych spacją.

• a:not(selektor) - Pseudo-klasa negująca, która wybiera wszystkie elementy, z wyjątkiem tych podanych wewnątrz nawiasu :not(). Na przykład, ten selektor wybierze wszystkie odnośniki (<a>), które nie mają klasy określonej w selektorze wewnątrz :not().

Dzięki tym selektorom atrybutów można bardziej precyzyjnie wybrać elementy na stronie i dostosować ich stylizację w zależności od wartości atrybutów.

Ćwiczenie: Zaawansowane selektory CSS

W tym ćwiczeniu nauczysz się, jak używać zaawansowanych selektorów CSS do precyzyjnej stylizacji elementów na stronie. Twoim zadaniem będzie utworzenie strony internetowej z różnymi elementami, które będą stylizowane za pomocą tych selektorów.

Krok 1: Stwórz podstawową strukturę dokumentu HTML

Najpierw stwórz nowy plik HTML i dodaj podstawową strukturę dokumentu HTML. Dodaj różne elementy, które będą stylizowane za pomocą zaawansowanych selektorów CSS.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
  <title>Zaawansowane selektory CSS</title>
</head>
<body>
  <h2>Nagłówek 2</h2>
  <p>Akapit po nagłówku 2</p>
  <div id="parent">
    <p>Bezpośrednie dziecko div</p>
    <span>Span wewnątrz div</span>
  </div>
  <h2>Nagłówek 2</h2>
  <p>Akapit po kolejnym nagłówku 2</p>
  <a href="https://example.com">Link do Example</a>
  <a href="https://google.com">Link do Google</a>
  <a href="https://example.com">Inny link do Example</a>
  <ul>
    <li>Pierwszy element listy</li>
    <li>Drugi element listy</li>
    <li>Trzeci element listy</li>
  </ul>
</body>
</html>

Krok 2: Stwórz plik CSS

Otwórz lub utwórz nowy plik CSS i zapisz go jako styles.css.

Krok 3: Selektor uniwersalny

Dodaj styl dla selektora uniwersalnego *, aby zmienić kolor tekstu na czerwony.

/* Selektor uniwersalny */
* {
  color: red;
}

Krok 4: Selektor identyfikatora

Dodaj styl dla elementu z identyfikatorem #parent, aby zmienić kolor tła.

/* Selektor identyfikatora */
#parent {
  background-color: lightgray;
  padding: 10px;
}

Krok 5: Selektor sąsiada

Dodaj styl dla akapitu (<p>), który występuje bezpośrednio po nagłówku <h2>, aby zmienić rozmiar czcionki.

/* Selektor sąsiada */
h2 + p {
  font-size: 18px;
}

Krok 6: Selektor dziecka

Dodaj styl dla bezpośrednich dzieci elementu <div>, aby zmienić kolor tekstu.

/* Selektor dziecka */
div > p {
  color: blue;
}

Krok 7: Selektor ogólnego rodzeństwa

Dodaj styl dla wszystkich akapitów (<p>), które występują po nagłówku <h2> na tym samym poziomie, aby zmienić grubość czcionki.

/* Selektor ogólnego rodzeństwa */
h2 ~ p {
  font-weight: bold;
}

Krok 8: Selektor atrybutu

Dodaj styl dla linków (<a>) z określonym atrybutem href, aby zmienić ich kolor.

/* Selektor atrybutu */
a[href*="google"] {
  color: green;
}

Wynik

Po wykonaniu wszystkich kroków twój plik HTML i CSS powinny wyglądać następująco:

Plik HTML (index.html)

Cała strona z kroku 1, bez zmian:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
  <title>Zaawansowane selektory CSS</title>
</head>
<body>
  <h2>Nagłówek 2</h2>
  <p>Akapit po nagłówku 2</p>
  <div id="parent">
    <p>Bezpośrednie dziecko div</p>
    <span>Span wewnątrz div</span>
  </div>
  <h2>Nagłówek 2</h2>
  <p>Akapit po kolejnym nagłówku 2</p>
  <a href="https://example.com">Link do Example</a>
  <a href="https://google.com">Link do Google</a>
  <a href="https://example.com">Inny link do Example</a>
  <ul>
    <li>Pierwszy element listy</li>
    <li>Drugi element listy</li>
    <li>Trzeci element listy</li>
  </ul>
</body>
</html>

Plik CSS (styles.css)

Wszystkie reguły z kroków 3-8 w jednym pliku:

/* Selektor uniwersalny */
* {
  color: red;
}

/* Selektor identyfikatora */
#parent {
  background-color: lightgray;
  padding: 10px;
}

/* Selektor sąsiada */
h2 + p {
  font-size: 18px;
}

/* Selektor dziecka */
div > p {
  color: blue;
}

/* Selektor ogólnego rodzeństwa */
h2 ~ p {
  font-weight: bold;
}

/* Selektor atrybutu */
a[href*="google"] {
  color: green;
}

Eksperymentuj dalej

1. Dodaj więcej elementów z różnymi selektorami, aby lepiej zrozumieć, jak działają różne selektory.
2. Spróbuj dodać więcej stylów do swojej strony, np. zmieniając kolory, rozmiary i inne właściwości CSS.
3. Przetestuj swoje umiejętności, tworząc bardziej złożone układy z użyciem różnych selektorów.

Po wykonaniu tego ćwiczenia powinieneś lepiej rozumieć, jak używać różnych zaawansowanych selektorów w CSS, aby precyzyjnie stylizować elementy na stronie.

Jak mawiał Mohamed: "Selektory CSS to jak precyzyjne hieroglify - im dokładniej wskazujesz element, tym lepszą kontrolę nad nim masz. Każdy skryba musi znać wszystkie symbole!"

Przetestuj zaawansowane selektory w edytorze poniżej:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Zaawansowane selektory CSS</title>
</head>
<body>
  <h2>Nagłówek 2</h2>
  <p>Akapit po nagłówku 2</p>
  <div id="parent">
    <p>Bezpośrednie dziecko div</p>
    <span>Span wewnątrz div</span>
  </div>
  <h2>Nagłówek 2</h2>
  <p>Akapit po kolejnym nagłówku 2</p>
  <a href="https://example.com">Link do Example</a>
  <a href="https://google.com">Link do Google</a>
  <a href="https://example.com">Inny link do Example</a>
  <ul>
    <li>Pierwszy element listy</li>
    <li>Drugi element listy</li>
    <li>Trzeci element listy</li>
  </ul>
</body>
</html>