Selector de hermano adyacente

Parte de la sección CSS Mastery del Journey de HTML de Coddy — lección 4 de 43.

El selector de hermanos adyacentes (+) se utiliza para aplicar estilos a un elemento que aparece justo después de un elemento específico. Ambos deben tener el mismo padre, y "adyacente" significa "inmediatamente uno al lado del otro".

Por ejemplo:

<h2>Heading</h2>
<p>This paragraph is styled</p>

Con este CSS:

h2 + p {
  font-weight: bold;
}

El párrafo tiene estilo porque sigue directamente a un elemento h2.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Desafío

Fácil

Crea un selector CSS que apunte solo a los párrafos (<p>) que siguen directamente a un elemento <h2> que describe un partido de baloncesto. Estiliza estos párrafos con un color de fuente azul (blue) y un tamaño de fuente de 18px.

Hoja de referencia

El selector de hermanos adyacentes (+) aplica estilos a un elemento que aparece inmediatamente después de un elemento específico. Ambos elementos deben tener el mismo padre.

Sintaxis:

element1 + element2 {
  /* estilos */
}

Ejemplo:

h2 + p {
  font-weight: bold;
}

Esto selecciona los párrafos que siguen directamente a un elemento h2.

Pruébalo tú mismo

<html>
<head>
    <title>Adjacent Sibling Selector</title>
    <style>
        /* CSS solution goes here */
        
    </style>
</head>
<body>
    <h2>Basketball Game Overview</h2>
    <p>The basketball game was an exciting match between the **Los Angeles Lakers** and the **Golden State Warriors**, featuring intense offense and solid defense from both teams.</p>
    
    <p>During the first half, the Lakers held a slight lead, with LeBron James making key plays, while Stephen Curry of the Warriors kept the game tight with impressive three-pointers.</p>
    
    <p>This paragraph is not directly after an h2, so it should not be affected.</p>
    
    <p>In the second half, the Warriors fought back, with Klay Thompson hitting critical shots, but the Lakers secured their win with solid defense and a game-winning dunk by Anthony Davis.</p>
</body>
</html>

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.