Selektory kombinowane

5.1 Rodzaje selektorów

Selektory kombinowane w CSS pozwalają wybierać elementy na podstawie ich wzajemnego położenia w drzewie DOM. Zapewniają bardziej precyzyjne zarządzanie stylami, umożliwiając stylizację elementów w zależności od ich kontekstu. W CSS istnieje kilka typów selektorów kombinowanych: potomek, element dziecka, sąsiedni element przyległy i sąsiedni element.

Rodzaje selektorów kombinowanych:

• Selektor potomka (Descendant Selector)
• Selektor elementu dziecka (Child Selector)
• Selektor sąsiedniego elementu przyległego (Adjacent Sibling Selector)
• Selektor ogólnego sąsiada (General Sibling Selector)

5.2 Selektor potomka

Selektor potomka wybiera wszystkie elementy, które są potomkami wskazanego elementu. Potomkami są wszystkie elementy znajdujące się wewnątrz wskazanego elementu na dowolnym poziomie zagnieżdżenia (mogą to być nie tylko dzieci, ale i wnuki, pra-wnuki itd.).

Składnia:

    
      rodzic potomek {
        właściwość: wartość;
        właściwość: wartość;
      }
    
  

Przykład:

    
      /* Wybiera wszystkie <p>, które znajdują się wewnątrz <div> */
      div p {
        color: blue;
      }
    
  

    
      <div>
        <p>Ten akapit będzie niebieski.</p>
        <div>
          <p>Ten akapit też będzie niebieski, ponieważ jest potomkiem "div".</p>
        </div>
      </div>
      <p>Ten akapit nie będzie niebieski.</p>
    
  

5.3 Selektor elementu dziecka

Selektor elementu dziecka wybiera tylko te elementy, które są bezpośrednimi dziećmi wskazanego rodzica.

Składnia:

    
      rodzic > dziecko {
        właściwość: wartość;
        właściwość: wartość;
      }
    
  

Przykład:

    
      /* Wybiera tylko <p>, które są bezpośrednimi dziećmi .container */
      .container > p {
        color: green;
      }
    
  

    
      <div class="container">
        <p>Ten akapit będzie zielony.</p>
        <div class="wrapper">
          <p>Ten akapit nie będzie zielony, ponieważ nie jest bezpośrednim dzieckiem .container.</p>
        </div>
        <p>Ten akapit będzie zielony.</p>
      </div>
      <p>Ten akapit nie będzie zielony.</p>
    
  

5.4 Selektor sąsiedniego elementu przyległego

Selektor sąsiedniego elementu przyległego wybiera element, który bezpośrednio następuje po wskazanym elemencie i znajduje się na tym samym poziomie zagnieżdżenia.

Składnia:

    
      poprzedni + następny {
        właściwość: wartość;
        właściwość: wartość;
      }
    
  

    
      /* Wybiera <p>, który bezpośrednio następuje po <h1> */
      h1 + p {
        color: red;
      }
    
  

    
      <h1>Nagłówek 1</h1>
      <p>Ten akapit będzie czerwony, ponieważ następuje bezpośrednio po "h1".</p>
      <p>Ten akapit nie będzie czerwony.</p>
    
  

5.5 Selektor ogólnego sąsiada

Selektor ogólnego sąsiada wybiera wszystkie elementy, które następują po wskazanym elemencie i znajdują się na tym samym poziomie zagnieżdżenia.

Składnia:

    
      poprzedni ~ następny {
        właściwość: wartość;
        właściwość: wartość;
      }
    
  

Przykład:

    
      /* Wybiera wszystkie <p>, które następują po <h1> na tym samym poziomie zagnieżdżenia */

      h1 ~ p {
        color: purple;
      }
    
  

    
      <h1>Nagłówek 1</h1>
      <p>Ten akapit będzie fioletowy.</p>
      <p>Ten akapit też będzie fioletowy.</p>
      <div>
        <p>Ten akapit nie będzie fioletowy, ponieważ jest na innym poziomie zagnieżdżenia.</p>
      </div>