Selectores combinadores hermano adyacente y hermano general en CSS
Que son las hojas de estilo (CSS) CSS y HTML Definición de estilos a nivel página Propiedades relacionadas a fuentes. Agrupación de varios elementos HTML con una misma regla de estilo Definición de varias reglas para un mismo elemento HTML Propiedades relacionadas al texto (color, text-align, text-decoration) Más propiedades relacionadas al texto (letter-spacing, word-spacing, text-indent, text-transform) Herencia de propiedades de estilo. Definición de un estilo en función del contexto. Definición de hojas de estilo en un archivo externo. Definición de estilos por medio de clases. Definición de estilos por medio de id. Propiedades relacionadas al borde de un elemento HTML (border-width, border-style, border-color) Más propiedades relacionadas al borde de un elemento HTML Propiedades relacionadas al padding de un elemento HTML Propiedades relacionadas al margen de un elemento HTML Propiedades relacionadas a listas Propiedades relacionadas al fondo (background) Propiedades relacionadas a fuentes Propiedades relacionadas al border Propiedades relacionadas al padding Propiedades relacionadas al margin Propiedades relacionadas al fondo (background) El selector universal * Pseudoclases Eliminacion subrayado de enlace Creación de un menú vertical Creación de un menú horizontal Propiedades relacionadas a la dimensión de un objeto en la página. Unidades de medida (px, rem, em, cm, mm etc.) Formas para indicar el color. Definir un cursor para un elemento HTML Aplicación de hojas de estilo a un formulario Definiendo reglas de estilo a una tabla. Posicionamiento relativo (position: relative) Posicionamiento absoluto (position: absolute) Posicionamiento absoluto y propiedad z-index Posicionamiento fijo (position: fixed) Disposición de 2 columnas (position: absolute) Propiedad float aplicada a una imagen Propiedades relacionadas a la dimensión de un objeto en la página Propiedad clear Disposición de 2 columnas (propiedad float) Disposición de 2 columnas, cabecera y pie Disposición de 3 columnas, cabecera y pie Diseño de ancho fijo Diseño de ancho líquido Selector de hijos Selector de hermano adyacente y hermano general Selector de atributo Pseudo-clases: first-child y last-child) Pseudo-clases: nth-child y nth-last-child Pseudo-clases: nth-of-type, nth-last-of-type, first-of-type y last-of-type Pseudo-clases: only-child y only-of-type Pseudo-clase: empty Pseudo-elementos: first-letter y first-line Pseudo-elementos: before y after CSS media queries Flexbox Flexbox - (flex-direction aplicada al contenedor) Flexbox - (justify-content aplicada al contenedor) Flexbox - (align-items aplicada al contenedor) Flexbox - (flex-wrap aplicada al contenedor) Flexbox - (align-content aplicada al contenedor) Flexbox - (flex-flow aplicada al contenedor) Flexbox - (flex-grow aplicada a los items) Flexbox - (flex-shrink aplicada a los items)o Flexbox - (flex-basis aplicada a los items) Flexbox - (flex aplicada a los items) Flexbox - (order aplicada a los items) Flexbox - (align-self aplicada a los items)

Selectores combinadores hermano adyacente y hermano general en CSS

Estamos metidos de lleno en el estudio de los selectores en CSS3 y vamos a seguir con los selectores combinadores hermano adyacente y hermano general en CSS.

Selector combinador hijo

El selector combinador descendiente permite seleccionar una etiqueta en base a su ancestro. En cambio, este selector es mucho más directo, ya que permite seleccionar solamente al hijo directo de un padre. Su sintaxis es la siguiente:

<!DOCTYPE html>
<html>
<head>
  <title>Problema</title>
  <meta charset="UTF-8">
<style>
/* CSS */
section>p { background: red; }
</style>
</head>
<body>
<section>
  <p>PRIMER PÁRRAFO Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati debitis, omnis est distinctio aperiam sint, harum magnam tempora quas veniam id laboriosam assumenda dolores cumque accusamus iste quia sapiente quis!</p>
>  <div>
    <p>PRIMER DIV Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam sunt soluta odit maxime iure tempora corporis suscipit laboriosam. Ea deserunt nostrum itaque eaque dolorem qui et saepe reiciendis ad, repellendus.</p>
  </div>
  <div>
    <p>SEGUNDO DIV Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore perspiciatis asperiores veritatis itaque ratione non alias, enim distinctio amet tenetur pariatur quas optio, ducimus, porro blanditiis repudiandae incidunt! Quod, ratione.</p>
  </div>
</section>
</body>
</html>

El signo >, significa que se seleccionarán solamente las etiquetas <p> que son hijas directas de <section>. Este selector combinador hermano, es muy similar al descendiente. Pero es más especifico porque selecciona únicamente a aquellos hijos directos de una etiqueta. Esto lo realiza gracias al signo >.

Selector combinador hermano adyacente

El "selector de hermano adyacente" permite seleccionar un elemento HTML que viene inmediatamente después de otro elemento HTML. Los dos elementos deben tener el mismo elemento padre. Por ejemplo:

<body>
<h1>Titulo 1</h1>
<p>Esto es el primer párrafo.</p>
<p>Esto es el segundo párrafo.</p>
<p>Esto es el tercer párrafo.</p>
</body>

Mediante la regla de estilo:

h1+p{ color:#f00;
}

Seleccionamos el primer párrafo que le sigue al elemento h1. Luego el primer párrafo se pinta de rojo.

Si aplicamos este otro estilo al mismo bloque HTML:

p+p{
color:#f00;
}

Se pintan de rojo el segundo y tercer párrafo ya que a cada uno de estos párrafos le antecede otro párrafo (no se pinta el primer párrafo porque no le antecede un párrafo sino un "h1")

selectores de hijos css


Selector de hermano general

Ahora el "selector de hermano general" permite seleccionar todos los hermanos a diferencia del selector de hermano adyacente que selecciona el primero.

Si tenemos el siguiente fragmento:

<body>
<h1>Titulo 1</h1>
<p>Esto es el primer párrafo.</p>
<p>Esto es el segundo párrafo.</p>
<p>Esto es el tercer párrafo.</p>
</body>

Y le aplicamos la regla:

h1~p{ color:#f00; }

Como resultado se aplica el color rojo a todos los párrafos adyacentes que tienen como hermano el elemento "h1".

Una página completa que muestra el empleo de estos dos selectores:

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<meta charset="UTF-8">
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>Titulo 1</h1>
<p>Esto es el primer párrafo.</p>
<p>Esto es el segundo párrafo.</p>
<p>Esto es el tercer párrafo.</p>
<h2>Titulo 2</h2>
<p>Esto es el primer párrafo.</p>
<p>Esto es el segundo párrafo.</p>
<p>Esto es el tercer párrafo.</p>
</body>
</body>
</html>

estilos.css

h1+p{
color:#f00;
}
h2~p{
color:#f00;
}
selector de hermano adyacente y hermano general