Selectores combinados

1. Tipos de selectores combinados

Los selectores combinados de CSS permiten seleccionar elementos según su posición jerárquica en relación con otros elementos. Esto los hace útiles para aplicar estilos a elementos que dependen del contexto o cuando necesitamos estilizar elementos en una estructura compleja. Los selectores combinados son una herramienta poderosa para la selección precisa, cuando una clase o identificador no es suficiente. Vamos a revisar los tipos principales de selectores combinados en CSS, incluyendo el selector de descendientes, el selector de hijos, el selector hermano adyacente y el selector hermano general.

Los selectores combinados en CSS incluyen diversas formas de seleccionar elementos basados en la jerarquía de HTML. Tipos principales de selectores combinados:

• Selector de descendientes (Descendant Selector): selecciona elementos que están dentro de otro elemento, en cualquier nivel de anidación.
• Selector de hijo (Child Selector): selecciona únicamente a los descendientes directos (inmediatos) de un elemento específico.
• Selector hermano adyacente (Adjacent Sibling Selector): selecciona un elemento que sigue inmediatamente a otro elemento en el mismo nivel jerárquico.
• Selector hermano general (General Sibling Selector): selecciona todos los elementos del mismo nivel que siguen a un elemento específico.

Cada uno de estos selectores es adecuado para varios casos y permite seleccionar específicamente elementos según su ubicación en la página.

2. Selector de descendientes (Descendant Selector)

El selector de descendientes selecciona todos los elementos dentro de otro elemento, sin importar el nivel de anidación. Se escribe con un espacio entre los selectores. Este tipo de selector es útil cuando necesitas estilizar elementos dentro de otro elemento, por ejemplo, todos los <p> dentro de un <div> con una clase específica.

.container p {
  color: blue;
}

<div class="container">
  <p>Este texto será azul porque está dentro del contenedor.</p>
  <div>
    <p>Este texto también será azul.</p>
  </div>
</div>
<p>Este texto no cambiará porque no está dentro del contenedor.</p>

Aquí, el selector .container p seleccionará todos los elementos <p> dentro del elemento con la clase container, incluyendo elementos en cualquier nivel de anidación.

3. Selector de hijo (Child Selector)

El selector de hijo selecciona únicamente a los descendientes inmediatos de un elemento. Se escribe usando el símbolo > entre los selectores. Este selector es muy útil cuando necesitas aplicar estilos solo a los elementos del nivel superior de anidación, sin afectar los niveles más profundos.

      
  .container > p {
    font-weight: bold;
  }
      
    

      
  <div class="container">
    <p>Este texto será en negrita.</p>
    <div>
      <p>Este texto no cambiará porque no es un hijo directo del contenedor.</p>
    </div>
  </div>
      
    

Aquí, solo el primer <p> será en negrita porque es un hijo directo de .container, mientras que el <p> anidado no cambiará.

4. Selector hermano adyacente (Adjacent Sibling Selector)

El selector hermano adyacente selecciona un elemento que sigue inmediatamente a otro elemento y está en el mismo nivel de anidación. Este selector se denota con el símbolo + entre los selectores y es útil para aplicar estilos a un elemento que viene inmediatamente después de otro, como el primer párrafo que sigue a un título.

      
  h2 + p {
    color: green;
  }
      
    

      
  <h2>Título</h2>
  <p>Este texto será verde porque sigue inmediatamente al título.</p>
  <p>Este texto no cambiará porque no es un elemento adyacente al h2.</p>
      
    

Aquí, el selector h2 + p cambiará el color solo del primer párrafo <p> que va inmediatamente después de <h2>.

5. Selector hermano general (General Sibling Selector)

El selector hermano general selecciona todos los elementos en el mismo nivel jerárquico que aparecen después de un elemento dado, independientemente de si están inmediatamente después de él o no. Este selector se denota con el símbolo ~ entre los selectores.

      
  h2 ~ p {
    font-style: italic;
  }
      
    

      
  <h2>Título</h2>
  <p>Este párrafo será en cursiva.</p>
  <div>
    <p>Este párrafo también será en cursiva porque es un hermano de h2 en el mismo nivel jerárquico.</p>
  </div>
      
    

En este ejemplo, el selector h2 ~ p selecciona todos los elementos <p> que vienen después de <h2> en el mismo nivel, sin importar si hay otros elementos entre ellos.

6. Ejemplo de uso de todos los selectores combinados

A continuación se presenta un ejemplo de HTML y CSS que demuestra el uso de todos los selectores combinados para seleccionar diversos elementos según su ubicación en la página.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de selectores combinados CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <p>Párrafo que es descendiente y hijo del contenedor.</p>
    <div>
      <p>Párrafo que es descendiente pero no hijo del contenedor.</p>
    </div>
  </div>
  <h2>Título</h2>
  <p>Párrafo que es hermano adyacente del h2.</p>
  <div>Este bloque no afectará a los párrafos siguientes.</div>
  <p>Párrafo que es un hermano general del h2.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de selectores combinados CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <p>Párrafo que es descendiente y hijo del contenedor.</p>
    <div>
      <p>Párrafo que es descendiente pero no hijo del contenedor.</p>
    </div>
  </div>
  <h2>Título</h2>
  <p>Párrafo que es hermano adyacente del h2.</p>
  <div>Este bloque no afectará a los párrafos siguientes.</div>
  <p>Párrafo que es un hermano general del h2.</p>
</body>
</html>

/* Selector de descendientes */
.container p {
  color: blue;
}

/* Selector de hijo */
.container > p {
  font-weight: bold;
}

/* Selector hermano adyacente */
h2 + p {
  color: green;
}

/* Selector hermano general */
h2 ~ p {
  font-style: italic;
}