Selettore fratello adiacente

Lezione 9 di 15 del corso Selettori CSS di Coddy.

Approfondiamo i selettori di fratelli adiacenti. Questi selettori prendono di mira gli elementi che condividono lo stesso genitore e si trovano immediatamente dopo l'elemento selezionato. Un selettore di fratelli adiacenti è un selettore CSS che seleziona tutti gli elementi che sono fratelli di un elemento specificato e si trovano immediatamente accanto a esso. Il selettore di fratelli adiacenti è indicato da un segno più (+) tra due selettori.

Sintassi

former_element + target_element {
  /* proprietà di stile */
}

Supponiamo di avere questa struttura HTML:

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

Per applicare uno stile allo <span> immediatamente successivo a un paragrafo, useresti il selettore di fratelli adiacenti:

p + span {
   font-weight: bold;
}

In questo caso, "Adjacent span" avrà un peso del carattere in grassetto.

Sfida

Facile

Crea una pagina web con un elemento p e un elemento span.
Usa un selettore di fratello adiacente per applicare un bordo rosso all'elemento span che si trova immediatamente accanto all'elemento p.

Provalo tu

<html>
<head>
    <title>Adjacent Sibling Selector Exercise</title>
    <style>
        /* CSS Code goes here */
    </style>
</head>
<body>
    
</body>
</html>

Tutte le lezioni di Selettori CSS

1Introduzione ai selettori CSS

Scopo dei selettori CSS Perché sono importanti?

4Selettori di attributo

Introduzione ai selettori di attributo Presenza e valori esatti Selettori di valori di attributo Selettori di valori di attributo II Selettori di valori di attributo III

2Selettori semplici

Selettori di tipo Selettori di classe Selettori ID Selettori universali

3Selettori combinatori

Selettore figlio Selettore discendenteSelettore fratello adiacenteSelettore fratello generale

Esercitati da solo: Playground Web