Combinación de selectores en CSS3
A la combinación de selectores añadimos un nuevo selector más:
elemento,elemento: aplicamos misma hojas de estilo a varios elementos. CSS1
elemento elemento: selección de elementos descendientes. CSS1
elemento > elemento: selección de elementos hijos. CSS2
elemento + elemento: selección de elementos hermanos. CSS2
elemento ~ elemento: Selección general de elementos hermanos. La diferencia con el selector de elementos hermanos (+) es que el segundo elemento no tiene necesariamente que estar justo detrás del primero. Aplicamos la hoja de estilos a todos los elementos 2 que tengan un elemento 1 anteirmente al mismo nivel. CSS3.
<!DOCTYPE html> <html> <head> <style> h1 ~ p { background-color: green; color:white; } </style> </head> <body> <h1> Los párrafos 1 y 3 tienen fondo verde </h1> <p> Párrafo 1 </p> <div> <p> Párrafo 2 </p> </div> <p> Párrafo 3 </p> </body> </html>Mientras que:
<!DOCTYPE html> <html> <head> <style> h1 + p { background-color: green; color:white; } </style> <body> <h1> Los párrafo 1 tiene fondo verde </h1> <p> Párrafo 1 </p> <div> <p> Párrafo 2 </p> </div> <p> Párrafo 3 </p> </body> </html>