Selettore fratello generale
Lezione 10 di 15 del corso Selettori CSS di Coddy.
In questa lezione esploreremo il concetto di selettori di fratelli generali, un modo potente per selezionare e applicare stili agli elementi che condividono lo stesso genitore e vengono dopo un elemento specifico.
I selettori di fratelli generali consentono di selezionare gli elementi che condividono lo stesso genitore e compaiono dopo un determinato elemento. Questo selettore è indicato dal simbolo tilde (~).
Sintassi:
element ~ target-element {
/* Stili applicati a target-element */
}Esempio:
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;
}Nell'esempio fornito, a tutti gli elementi <p> che compaiono dopo l'elemento <div class="box"> verrà assegnato il colore grigio per il testo. Il selettore di fratelli generali (~) seleziona e applica stili agli elementi <p> successivi all'elemento <div> specificato.
Sfida
FacileData la struttura HTML, applica un colore di sfondo unico a tutti gli elementi <h3> che vengono dopo l'elemento <h2>.
Provalo tu
<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>
Tutte le lezioni di Selettori CSS
3Selettori combinatori
Selettore figlioSelettore discendenteSelettore fratello adiacenteSelettore fratello generaleEsercitati da solo: Playground Web