Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie
Polityka Prywatności
OK
CodeWorlds

Zaawansowane selektory CSS

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

*

1* {
2  color: red;
3}

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

#

1#myid {
2  color: red;
3}

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.

element + element

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.

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

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

element > element

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.

1div > p {
2    color: blue;
3}

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

element ~ element

Selektor ten odwołuje się do elementów sąsiednich. Wybierze elementy, które występują bezpośrednio po wcześniej wymienionym elemencie.

Ten selektor działa na wszystkich elementach, które sąsiadują z określonym elementem na tym samym poziomie.

1h2 ~ p {
2    font-weight: bold;
3}

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 HTML istnieje kilka innych rodzajów selektorów atrybutów, które można wykorzystać w CSS do precyzyjnego wybierania i stylizacji elementów:

  • 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-="value"] - Ten znak () pozwala wybrać wszystkie elementy, które mają wartość niestandardowego atrybutu zaczynającego się od "data-" i równą "value". Na przykład, ten selektor wybierze wszystkie elementy, które mają atrybuty zaczynające się od "data-" i zawierające wartość "value". Można to wykorzystać do tworzenia własnych atrybutów danych i stylizowania odpowiednich elementów.

  • 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.

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
7  <title>Zaawansowane selektory CSS</title>
8</head>
9<body>
10  <h2>Nagłówek 2</h2>
11  <p>Akapit po nagłówku 2</p>
12  <div id="parent">
13    <p>Bezpośrednie dziecko div</p>
14    <span>Span wewnątrz div</span>
15  </div>
16  <h2>Nagłówek 2</h2>
17  <p>Akapit po kolejnym nagłówku 2</p>
18  <a href="https://example.com">Link do Example</a>
19  <a href="https://google.com">Link do Google</a>
20  <a href="https://example.com">Inny link do Example</a>
21  <ul>
22    <li>Pierwszy element listy</li>
23    <li>Drugi element listy</li>
24    <li>Trzeci element listy</li>
25  </ul>
26</body>
27</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.

1/* Selektor uniwersalny */
2* {
3  color: red;
4}

Krok 4: Selektor identyfikatora

Dodaj styl dla elementu z identyfikatorem 

#parent
, aby zmienić kolor tła.

1/* Selektor identyfikatora */
2#parent {
3  background-color: lightgray;
4  padding: 10px;
5}

Krok 5: Selektor sąsiedniego elementu

Dodaj styl dla akapitu (

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

1/* Selektor sąsiedniego elementu */
2h2 + p {
3  font-size: 18px;
4}

Krok 6: Selektor dziecka

Dodaj styl dla bezpośrednich dzieci elementu 

<div>
, aby zmienić kolor tekstu.

1/* Selektor dziecka */
2div > p {
3  color: blue;
4}

Krok 7: Selektor sąsiednich elementów

Dodaj styl dla wszystkich akapitów (

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

1/* Selektor sąsiednich elementów */
2h2 ~ p {
3  font-weight: bold;
4}

Krok 8: Selektor atrybutu

Dodaj styl dla linków (

<a>
) z określonym atrybutem href, aby zmienić ich kolor.

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

Wynik

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

Plik HTML (index.html)

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
7  <title>Zaawansowane selektory CSS</title>
8</head>
9<body>
10  <h2>Nagłówek 2</h2>
11  <p>Akapit po nagłówku 2</p>
12  <div id="parent">
13    <p>Bezpośrednie dziecko div</p>
14    <span>Span wewnątrz div</span>
15  </div>
16  <h2>Nagłówek 2</h2>
17  <p>Akapit po kolejnym nagłówku 2</p>
18  <a href="https://example.com">Link do Example</a>
19  <a href="https://google.com">Link do Google</a>
20  <a href="https://example.com">Inny link do Example</a>
21  <ul>
22    <li>Pierwszy element listy</li>
23    <li>Drugi element listy</li>
24    <li>Trzeci element listy</li>
25  </ul>
26</body>
27</html>

Plik CSS (styles.css)

1/* Selektor uniwersalny */
2* {
3  color: red;
4}
5
6/* Selektor identyfikatora */
7#parent {
8  background-color: lightgray;
9  padding: 10px;
10}
11
12/* Selektor sąsiedniego elementu */
13h2 + p {
14  font-size: 18px;
15}
16
17/* Selektor dziecka */
18div > p {
19  color: blue;
20}
21
22/* Selektor sąsiednich elementów */
23h2 ~ p {
24  font-weight: bold;
25}
26
27/* Selektor atrybutu */
28a[href*="google"] {
29  color: green;
30}

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:

Przejdź do CodeWorlds→