CSS


Introducción a CSS
2.2.2. Selector adyacente
El selector adyacente utiliza el signo + y su sintaxis es:
elemento1 + elemento2 { ... }
La explicación del comportamiento de este selector no es sencilla, ya que selecciona todos los elementos de tipo elemento2 que cumplan las dos siguientes condiciones:
▪ elemento1 y elemento2 deben ser hermanos, por lo que su elemento padre debe ser el
mismo.
▪ elemento2 debe aparecer inmediatamente después de elemento1 en el código HTML de la página.
En el siguiente ejemplo:
h1 + h2 { color: red }

Titulo1


Subtítulo


...

Otro subtítulo


...
Los estilos del selector h1 + h2 se aplican al primer elemento

de la página, pero no al segundo

, ya que:
▪ El elemento padre de

es , el mismo padre que el de los dos elementos

.
Así, los dos elementos

cumplen la primera condición del selector adyacente.
▪ El primer elemento

aparece en el código HTML justo después del elemento

, por lo que este elemento

también cumple la segunda condición del selector adyacente.
▪ Por el contrario, el segundo elemento

no aparece justo después del elemento

, por lo que no cumple la segunda condición del selector adyacente y por tanto no se le aplican los estilos de h1 + h2.
El siguiente ejemplo es muy útil para los textos que se muestran como libros:
p + p { text-indent: 1.5em; }
En muchos libros, suele ser habitual que la primera línea de todos los párrafos esté indentada, salvo la primera línea del primer párrafo. Con el selector p + p, se seleccionan todos los párrafos que estén dentro del mismo elemento padre que otros párrafos y que vayan justo después de otro párrafo. En otras palabras, el selector p + p selecciona todos los párrafos de un elemento salvo el primer párrafo.
Capítulo 2. Selectores Introducción a CSS
Fuente: www.librosweb.es
Introducción a CSS
Javier Eguíluz Pérez

Entradas populares de este blog

CERRAR SESIÓN o APAGAR EL EQUIPO.

Curso Excel 2010 4.3. Ampliar o reducir una selección

GLOSARIO CV: Tag