Tutorial CSS parte 2: 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.