Hervera
Open Menu
Serie de tutoriales con lo necesario para dominar CSS. En la segunda entrega se hará un repaso de los principales selectores descendentes o compuestos

Una página o aplicación está compuesta por muchos componentes web.

Y aunque sean iguales en funcionamiento, algunas veces no tendrán el mismo estilo gráfico dependiendo de cual sea su contenedor o "padre".

Por esta razón, es necesario conocer como modificar el estilo de un componente dependiendo de donde esté situado.
Para seleccionar un elemento dependiendo de cual sea su padre o contenedor se utilizarán los selectores descendentes
A continuación se especifican unos de los mas usados.

selector modo de uso ejemplo explicación
selector múltiple selector1selector2 .product.dark se usa para seleccionar elementos que contengan como mínimo los selectores especificados (selectores escritos sín espacios).
selector descendente selector1 selector2 .product .title se usa para seleccionar todos los elementos que concuerden con el segundo selector y que estén dentro del primer. No importa el nivel de profundidad en el que estén, todos aplicarán.
selector descendente padre hijo #name se usa para seleccionar el elemento único con el id especificado.
selector inmediatamente descendente selector1 > selector2 .product > title se usa para seleccionar solamente los elementos contenidos en el primer nivel del padre. Si estos a su vez contienen más elementos, los estilos no les afectarán.
selector contiguo selector1 + selector2 .product + .product se usa para seleccionar el elemento2 solamente si este es precedido por el elemento 1 en el mismo nivel.

Combinando selectores es como daremos estilos a las páginas o aplicaciones web.

Fotografía de portada de: unsplash-logo Pankaj Patel