Selektor potomka bezpośredniego

Lekcja 7 z 15 w kursie Selektory CSS w Coddy.

Selektor potomka to rodzaj selektora CSS, który wybiera wszystkie elementy będące bezpośrednimi potomkami określonego elementu. Selektor potomka oznacza się znakiem większości (>) między dwoma selektorami.

Przykład:

Rozważ następującą strukturę HTML:

<div class="parent">
   <p>This is a direct child paragraph.</p>
   <div>
       <p>This is an indirect child paragraph.</p>
   </div>
</div>

Aby wybrać bezpośredniego potomka będącego akapitem, użyj kombinatora potomka w następujący sposób:

.parent > p {
    color: blue;
}

W tym przykładzie tylko akapit będący bezpośrednim potomkiem zmieni kolor na niebieski, a ten zagnieżdżony wewnątrz elementu <div> nie.

Selektorów potomka można również używać, aby uniknąć stylowania elementów, które nie są bezpośrednimi potomkami określonego elementu. Możesz na przykład użyć selektora potomka, aby ustawić czerwony kolor wszystkich linków będących bezpośrednimi potomkami elementu p.

Wyzwanie

Łatwy

Mając poniższą strukturę HTML, utwórz regułę CSS używającą kombinatora potomka, aby nadać żółty kolor tła bezpośrednim elementom listy wewnątrz elementu <ul>.

Spróbuj swoich sił

<html>
<head>
  <title>Child Selector Exercise</title>
  <style>
    /* CSS Code goes here */
  </style>
</head>
<body>
  <ul class="list">
    <li>This is a direct list item.</li>
    <div>
        <li>This is an indirect list item.</li>
    </div>
</ul>
</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 potomka Selektor sąsiedniego rodzeństwa Selektor ogólnego rodzeństwa

Poćwicz samodzielnie: Edytor online Web