Selectores SelectoresEn esta lección se trata:
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 |
Los nombres de las clases sólo pueden contener caracteres ingleses, números, guiones y subrayados, aunque el primer carácter no puede ser ni un número ni un guión.
Para definir una clase que sólo afecte a una etiqueta, se debe escribir el nombre de la etiqueta y de la clase separado por un punto, como muestran el siguiente ejemplo:
| p { color: black; } p.aviso { color: red; } span.grande { font-size: 200%; } |
Esto es un párrafo sin clase. Esto es un párrafo de clase "aviso". Esto es un párrafo con un span de clase "grande" (en la palabra "span"). |
Para definir una clase que afecte a cualquier etiqueta, se debe escribir un punto y el nombre de la clase, como muestran el siguiente ejemplo:
| .aviso { color: red; } | Esto es un párrafo sin clase pero con un span de clase "aviso" (en la
palabra "pero").
Esto es un párrafo de clase "aviso". |
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; } |
|
| p.aviso { color: green; } .aviso { color: red; } |
Esto es un párrafo sin clase.
Esto es un párrafo de clase "aviso". |
| .aviso { color: red; } p.aviso { color: green; } |
Esto es un párrafo sin clase. Esto es un párrafo de clase "aviso". |