Selektor sąsiedniego rodzeństwa

Lekcja 9 z 15 w kursie Selektory CSS w Coddy.

Przyjrzyjmy się selektorom sąsiedniego rodzeństwa. Wybierają one elementy, które mają tego samego rodzica i występują bezpośrednio po wskazanym elemencie. Selektor sąsiedniego rodzeństwa CSS wybiera wszystkie elementy będące rodzeństwem wskazanego elementu i znajdujące się bezpośrednio obok niego. Selektor sąsiedniego rodzeństwa zapisuje się, umieszczając znak plusa (+) między dwoma selektorami.

Składnia

former_element + target_element {
  /* właściwości stylu */
}

Załóżmy, że mamy taką strukturę HTML:

<div class="container">
   <p>First paragraph</p>
   <span>Adjacent span</span>
   <p>Second paragraph</p>
</div>

Aby ostylować element <span> występujący bezpośrednio po akapicie, użyj selektora sąsiedniego rodzeństwa:

p + span {
   font-weight: bold;
}

W tym przypadku tekst „Adjacent span” będzie pogrubiony.

Wyzwanie

Łatwy

Utwórz stronę internetową z elementem p i elementem span.
Użyj selektora sąsiadującego rodzeństwa, aby nadać czerwoną obwódkę elementowi span, który bezpośrednio sąsiaduje z elementem p.

Spróbuj swoich sił

<html>
<head>
    <title>Adjacent Sibling Selector Exercise</title>
    <style>
        /* CSS Code goes here */
    </style>
</head>
<body>
    
</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średniego Selektor potomkaSelektor sąsiedniego rodzeństwaSelektor ogólnego rodzeństwa

Poćwicz samodzielnie: Edytor online Web