Selektor potomka

Lekcja 8 z 15 w kursie Selektory CSS w Coddy.

W poprzednim temacie poznaliśmy selektor dziecka, który wybiera bezpośrednie dzieci elementu. Teraz przyjrzyjmy się selektorom potomków, które są oznaczane spacją. Selektor potomków pozwala wybrać elementy zagnieżdżone w innym elemencie na dowolnym poziomie, nie tylko jego bezpośrednie dzieci.

Składnia

selector1 selector2 {
  /* deklaracje właściwości */
}

Na przykład,

<html>
<head>
  <title>Combinator</title>
  <style>
    div p {
      color: red;
      font-size: 2em;
    }
  </style>
</head>
<body>
  <div>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </div>
</body>
</html>

Powyższa reguła CSS nada obu akapitom czerwony kolor i rozmiar czcionki 2em.

Jaki jest jego związek z selektorami dzieci?

Selektor potomków jest bardziej ogólny niż selektor dziecka. Oznacza to, że selektor potomków dopasuje wszystkie elementy będące potomkami wskazanego elementu, natomiast selektor dziecka dopasuje tylko elementy będące jego bezpośrednimi potomkami.

Na przykład selektor div p dopasuje wszystkie elementy p będące potomkami elementu div, w tym elementy p zagnieżdżone w innych elementach p. Selektor div > p dopasuje tylko elementy p będące bezpośrednimi potomkami elementu div.

Wyzwanie

Łatwy

Opierając się na poprzednim ćwiczeniu, użyjmy tej samej struktury HTML. Napisz regułę CSS z użyciem selektora potomka, aby nadać styl wszystkim akapitom wewnątrz elementu .list, niezależnie od poziomu zagnieżdżenia. Wybierz dla nich nowy kolor, rozmiar i czcionkę.

Spróbuj swoich sił

<html>
<head>
    <title>Descendant Selector Exercise</title>
    <style>
        /* CSS Code goes here */
    </style>
</head>
<body>
<div>
    <p>This paragraph is not inside a list</p>
    <ul class="list">
        <li>
            <p>This is a paragraph inside a list item.</p>
        </li>
        <li>
            <div>
                <p>This is a paragraph inside a nested div within a list item.</p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

Wszystkie lekcje w sekcji Selektory CSS

1Wprowadzenie do selektorów CSS

Cel selektorów CSS Dlaczego są ważne?

4Selektory atrybutów

Wprowadzenie do selektorów atrybutów Obecność i dokładne wartości Selektory wartości atrybutu Selektory wartości atrybutu II Selektory wartości atrybutu III

2Proste selektory

Selektory typów Selektory klas Selektory ID Selektory uniwersalne

3Selektory kombinatorów

Selektor potomka bezpośredniegoSelektor potomkaSelektor sąsiedniego rodzeństwa Selektor ogólnego rodzeństwa

Poćwicz samodzielnie: Edytor online Web