Der Kindselektor in CSS

Der Kindselektor > erlaubt es, Elemente basierend auf der direkten Verschachtelung ineinander auszuwählen.

Syntax

cssSelektor1 > Selektor2 {
  
}

Beispiel

Wenden wir uns allen b-Tags zu, die sich direkt innerhalb von p-Tags befinden, und färben sie rot ein:

html<p>
  Text <b>+</b>
</p>
<p>
  Text <i><b>-</b></i>
</p>

cssp > b {
  color: red;
}

Результат:

Beispiel

Wenden wir uns allen b-Tags zu, die sich direkt innerhalb von Elementen mit der Klasse .block befinden, und färben sie in rot ein:

html<p class="block">
  Text <b>+</b>
</p>
<p class="block">
  Text <i><b>-</b></i>
</p>
<p>
  Text <b>-</b>
</p>

css.block > b {
  color: red;
}

Результат:

Beispiel

Wenden wir uns allen Elementen mit der Klasse .elem zu, die sich direkt innerhalb von Elementen mit der Klasse .block befinden, und färben sie rot ein:

html<p class="block">
  Text <span class="elem">+</span>
</p>
<p class="block">
  Text <i><span class="elem">-</span></i>
</p>
<p class="block">
  Text <span>-</span>
</p>
<p>
  Text <span class="elem">-</span>
</p>

css.block > .elem {
  color: red;
}

Результат:

Siehe auch