Selectores SelectoresEn esta lección aprenderás:
Por escribir
Para definir varios selectores simultáneamente, se pueden escribir los selectores separados por comas, aunque no siempre funciona, como muestran los siguientes ejemplos:
| h1, h2, h3 { font-size: 120%; text-align: left; margin-left: 10px; } | Esto es un encabezado h1Esto es un encabezado h2Esto es un encabezado h3 |
Se puede definir elementos descendientes de otros. Un elemento es descendiente de otro si la etiqueta se encuentra dentro de otra.
En los ejemplos siguientes, se ha querido facilitar la lectura estableciendo unos márgenes superior e inferior de los párrafos bastante grandes, pero no se ha querido una separación tan grande cuando el párrafo se encuentra dentro de una lista. La solución es utilizar el selector li p
| p { margin-top: 20px; margin-bottom: 20px; } | Los navegadores aplican a los párrafos unos márgenes superior e inferior para facilitar la lectura. En este ejemplo esos márgenes se han establecido en 20px en la hoja de estilo, por eso estos párrafos aparecen incluso más separado de lo normal. Los navegadores aplican a los párrafos unos márgenes superior e inferior para facilitar la lectura. En este ejemplo esos márgenes se han establecido en 20px en la hoja de estilo, por eso estos párrafos aparecen incluso más separado de lo normal. |
| p { margin-top: 20px; margin-bottom: 20px; } |
|
| p { margin-top: 20px; margin-bottom: 20px; } li p { margin-top: 10px; margin-bottom: 10px; } |
|
Si un elemento se ve afectado por varias reglas de una hoja de estilo, el navegador aplica todas las propiedades que aparecen en todas las reglas, además de las propiedades de la hoja de estilo del navegador.
Si la misma propiedad aparece en varias reglas, la propiedad que aplica el navegador depende de los selectores de las reglas.
Si a un elemento le afectan dos reglas con selectores del mismo nivel", el navegador aplica la que aparece después en la hoja de estilo
| p { color: red; text-transform: capitalize; } p { color: green; text-decoration: underline; } |
Esto es un párrafo con estilo |
| p { color: green; text-transform: capitalize; } p { color: red; text-decoration: underline; } |
Esto es un párrafo con estilo |
Si a un elemento le afectan dos reglas con selectores de diferente "nivel", el navegador aplica la que utilice más descendientes, independientemente de su orden en la hoja de estilo.
| li { color: red; text-transform: capitalize; } ul li { color: green; text-decoration: underline; } |
|
| ul li { color: green; text-decoration: underline;
} li { color: red; text-transform: capitalize; } |
|