Selectores Combinados

5.1 Tipos de Selectores

Los selectores combinados en CSS permiten seleccionar elementos basándose en su posición relativa en el árbol DOM. Proporcionan un control de estilos más preciso, permitiendo estilizar elementos dependiendo de su contexto. En CSS existen varios tipos de selectores combinados: descendiente, hijo, hermano adyacente y hermano general.

Tipos de selectores combinados:

• Selector de descendiente (Descendant Selector)
• Selector de hijo (Child Selector)
• Selector de hermano adyacente (Adjacent Sibling Selector)
• Selector de hermano general (General Sibling Selector)

5.2 Selector de Descendiente

El selector de descendiente elige todos los elementos que son descendientes de un elemento especificado. Los descendientes son todos aquellos elementos dentro de un elemento específico en cualquier nivel de anidación (pueden ser no solo hijos, sino también nietos y bisnietos).

Sintaxis:

    
      padre descendiente {
        propiedad: valor;
        propiedad: valor;
      }
    
  

Ejemplo:

    
      /* Selecciona todos los <p> que están dentro de <div> */
      div p {
        color: blue;
      }
    
  

    
      <div>
        <p>Este párrafo será azul.</p>
        <div>
          <p>Este párrafo también será azul, ya que es descendiente de "div".</p>
        </div>
      </div>
      <p>Este párrafo no será azul.</p>
    
  

5.3 Selector de Hijo

El selector de hijo elige solo aquellos elementos que son hijos directos de un padre especificado.

Sintaxis:

    
      padre > hijo {
        propiedad: valor;
        propiedad: valor;
      }
    
  

Ejemplo:

    
      /* Selecciona solo los <p> que son hijos directos de .container */
      .container > p {
        color: green;
      }
    
  

    
      <div class="container">
        <p>Este párrafo será verde.</p>
        <div class="wrapper">
          <p>Este párrafo no será verde, ya que no es hijo directo de .container.</p>
        </div>
        <p>Este párrafo será verde.</p>
      </div>
      <p>Este párrafo no será verde.</p>
    
  

5.4 Selector de Hermano Adyacente

El selector de hermano adyacente elige un elemento que sigue directamente a un elemento especificado y está en el mismo nivel de anidación.

Sintaxis:

    
      anterior + siguiente {
        propiedad: valor;
        propiedad: valor;
      }
    
  

    
      /* Selecciona <p> que sigue directamente a <h1> */
      h1 + p {
        color: red;
      }
    
  

    
      <h1>Título 1</h1>
      <p>Este párrafo será rojo, ya que sigue directamente a "h1".</p>
      <p>Este párrafo no será rojo.</p>
    
  

5.5 Selector de Hermano General

El selector de hermano general elige todos los elementos que siguen a un elemento especificado y están en el mismo nivel de anidación.

Sintaxis:

    
      anterior ~ siguiente {
        propiedad: valor;
        propiedad: valor;
      }
    
  

Ejemplo:

    
      /* Selecciona todos los <p> que siguen a <h1> en el mismo nivel de anidación */

      h1 ~ p {
        color: purple;
      }
    
  

    
      <h1>Título 1</h1>
      <p>Este párrafo será púrpura.</p>
      <p>Este párrafo también será púrpura.</p>
      <div>
        <p>Este párrafo no será púrpura, ya que está en otro nivel de anidación.</p>
      </div>