Kombinowane selektory

1. Rodzaje kombinowanych selektorów

CSS kombinowane selektory pozwalają wybierać elementy na podstawie ich hierarchicznej pozycji względem innych elementów. Umożliwia to stosowanie stylów do elementów zależnych od kontekstu albo gdy musimy stylizować elementy w skomplikowanej strukturze. Kombinowane selektory to potężne narzędzie dla precyzyjnego wyboru, gdy jedna klasa lub identyfikator nie wystarczy. Przyjrzyjmy się głównym rodzajom kombinowanych selektorów w CSS, w tym selektorowi potomka, selektorowi elementu potomnego, selektorowi sąsiedniego przyległego elementu oraz selektorowi ogólnego sąsiada.

Kombinowane selektory w CSS obejmują różne sposoby wybierania elementów bazując na hierarchii HTML. Główne rodzaje kombinowanych selektorów:

• Selektor potomka (Descendant Selector): wybiera elementy, które znajdują się wewnątrz innego elementu, na dowolnym poziomie zagnieżdżenia.
• Selektor elementu potomnego (Child Selector): wybiera tylko bezpośrednich (bezpośrednich) potomków określonego elementu.
• Selektor sąsiedniego przyległego elementu (Adjacent Sibling Selector): wybiera element, który znajduje się bezpośrednio po innym elemencie na tym samym poziomie hierarchii.
• Selektor ogólnego sąsiada (General Sibling Selector): wybiera wszystkie elementy na tym samym poziomie, które znajdują się po wskazanym elemencie.

Każdy z tych selektorów nadaje się do różnych przypadków i pozwala precyzyjnie wybierać elementy w zależności od ich położenia na stronie.

2. Selektor potomka (Descendant Selector)

Selektor potomka wybiera wszystkie elementy wewnątrz innego elementu, niezależnie od poziomu zagnieżdżenia. Jest on zapisywany przez spację między selektorami. Ten typ selektora jest przydatny, gdy trzeba stylizować elementy wewnątrz innego elementu, na przykład wszystkie <p> w środku <div> o określonej klasie.

.container p {
  color: blue;
}

<div class="container">
  <p>Ten tekst będzie niebieski, bo znajduje się w kontenerze.</p>
  <div>
    <p>Ten tekst też będzie niebieski.</p>
  </div>
</div>
<p>Ten tekst pozostanie bez zmian, bo nie znajduje się w kontenerze.</p>

Tutaj selektor .container p wybierze wszystkie elementy <p> wewnątrz elementu z klasą container, w tym elementy na dowolnym poziomie zagnieżdżenia.

3. Selektor elementu potomnego (Child Selector)

Selektor elementu potomnego wybiera tylko bezpośrednich potomków elementu. Jest zapisywany za pomocą symbolu > między selektorami. Ten selektor jest przydatny, gdy trzeba zastosować styl tylko do elementów najwyższego poziomu zagnieżdżenia i nie obejmować głębszych poziomów.

      
  .container > p {
    font-weight: bold;
  }
      
    

      
  <div class="container">
    <p>Ten tekst będzie pogrubiony.</p>
    <div>
      <p>Ten tekst pozostanie zwykły, bo nie jest bezpośrednim potomkiem container.</p>
    </div>
  </div>
      
    

Tutaj tylko pierwszy <p> stanie się pogrubiony, bo jest bezpośrednim potomkiem .container, a zagnieżdżony <p> pozostanie bez zmian.

4. Selektor sąsiedniego przyległego elementu (Adjacent Sibling Selector)

Selektor sąsiedniego przyległego elementu wybiera element, który bezpośrednio występuje po innym elemencie i jest na tym samym poziomie zagnieżdżenia. Ten selektor jest oznaczony symbolem + między selektorami i jest przydatny do stosowania stylów do elementu, który występuje od razu po innym, na przykład do pierwszego akapitu następującego po nagłówku.

      
  h2 + p {
    color: green;
  }
      
    

      
  <h2>Nagłówek</h2>
  <p>Ten tekst stanie się zielony, bo występuje od razu po nagłówku.</p>
  <p>Ten tekst nie zmieni się, bo nie jest sąsiednim elementem po h2.</p>
      
    

Tutaj selektor h2 + p zmieni kolor tylko u pierwszego akapitu <p>, który występuje od razu po <h2>.

5. Selektor ogólnego sąsiada (General Sibling Selector)

Selektor ogólnego sąsiada wybiera wszystkie elementy na tym samym poziomie zagnieżdżenia, które występują po określonym elemencie, niezależnie od tego, czy znajdują się bezpośrednio po nim, czy po kilku innych elementach. Ten selektor oznaczony jest symbolem ~ między selektorami.

      
  h2 ~ p {
    font-style: italic;
  }
      
    

      
  <h2>Nagłówek</h2>
  <p>Ten akapit będzie kursywą.</p>
  <div>
    <p>Ten akapit też będzie kursywą, bo jest sąsiadem h2 na tym samym poziomie zagnieżdżenia.</p>
  </div>
      
    

W tym przykładzie selektor h2 ~ p wybiera wszystkie elementy <p>, które występują po <h2> na tym samym poziomie, niezależnie od tego, czy między nimi są inne elementy.

6. Przykład użycia wszystkich kombinowanych selektorów

Poniżej znajduje się przykład HTML i CSS, który demonstruje użycie wszystkich kombinowanych selektorów dla wyboru różnych elementów w zależności od ich rozmieszczenia na stronie.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Przykład kombinowanych selektorów CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <p>Akapit, który jest potomkiem i elementem potomnym .container.</p>
    <div>
      <p>Akapit, który jest potomkiem, ale nie elementem potomnym .container.</p>
    </div>
  </div>
  <h2>Nagłówek</h2>
  <p>Akapit, który jest sąsiednim sąsiadem h2.</p>
  <div>Ten blok nie wpłynie na kolejne akapity.</div>
  <p>Akapit, który jest ogólnym sąsiadem h2.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Przykład kombinowanych selektorów CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <p>Akapit, który jest potomkiem i elementem potomnym .container.</p>
    <div>
      <p>Akapit, który jest potomkiem, ale nie elementem potomnym .container.</p>
    </div>
  </div>
  <h2>Nagłówek</h2>
  <p>Akapit, który jest sąsiednim sąsiadem h2.</p>
  <div>Ten blok nie wpłynie na kolejne akapity.</div>
  <p>Akapit, który jest ogólnym sąsiadem h2.</p>
</body>
</html>

/* Selektor potomka */
.container p {
  color: blue;
}

/* Selektor elementu potomnego */
.container > p {
  font-weight: bold;
}

/* Selektor sąsiedniego przyległego elementu */
h2 + p {
  color: green;
}

/* Selektor ogólnego sąsiada */
h2 ~ p {
  font-style: italic;
}