Selektor ogólnego rodzeństwa

Lekcja 10 z 15 w kursie Selektory CSS w Coddy.

W tej lekcji omówimy koncepcję selektorów rodzeństwa ogólnego — skutecznego sposobu wybierania i stylizowania elementów, które mają tego samego rodzica i występują po określonym elemencie.

Selektory rodzeństwa ogólnego pozwalają wybierać elementy, które mają tego samego rodzica i występują po określonym elemencie. Ten selektor oznacza się symbolem tyldy (~).

Składnia:

element ~ target-element {
    /* Style stosowane do target-element */
}

Przykład:

HTML:

<div class="box"></div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div class="highlight"></div>
<p>Paragraph 4</p>

CSS:

.box ~ p {
    color: gray;
}

W podanym przykładzie kolor tekstu wszystkich elementów <p> występujących po elemencie <div class="box"> zostanie ustawiony na szary. Selektor rodzeństwa ogólnego (~) wybiera i stylizuje kolejne elementy <p> znajdujące się po określonym elemencie <div>.

Wyzwanie

Łatwy

Biorąc pod uwagę strukturę HTML, zastosuj unikalny kolor tła do wszystkich elementów <h3>, które występują po elemencie <h2>.

Spróbuj swoich sił


<html>
<head>
  <title>General Sibling Selector Exercise</title>
  <style>
    
  </style>
</head>
<body>
  <div class="content">
    <h2>Introduction</h2>
    <p>Content goes here...</p>
    <h3>Subsection 1</h3>
    <p>More content...</p>
    <h3>Subsection 2</h3>
    <p>Even more content...</p>
</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średniego Selektor potomka Selektor sąsiedniego rodzeństwaSelektor ogólnego rodzeństwa

Poćwicz samodzielnie: Edytor online Web