Múltiples tipos de selectores
Ya sea con el código CSS3 ubicado en un fichero css externo o bien insertado dentro del mismo html, la estructura que debe seguir es la misma.
selector{
atributo:valor;
atributo:valor;
}
El selector es quién indica a qué elemento del HTML se le van a asignar los atributos que están indicados entre el '{' y el '}'.
Así, debido a su importancia, vamos a tratar los selectores más habituales:
@font-face{
Los selectores que empiezan por '@font-face' indican las fuentes personalizadas (tipografías ligadas a ficheros *.ttf) que usará la página html.
(Tratado en el tema 'Utilización de fuentes personalizadas (ttf)')
body{
section{
footer{ ...
Los selectores que empiezan directamente con el nombre de alguna de las estructuras semánticas de HTML5 (header, section, article, aside, footer, nav..) o apartados tradicionales (body, header) aplican los códigos CSS que se deseen añadir a las secciones especificadas.
#div_1{
Aquellos selectores que empiezan con el símbolo '#' hacen referencia al id de los DIV, SPAN o P ubicados en el html. Si existen varios DIV con el mismo id dentro del html el estilo especificado se aplicará a todos los DIVs que compartan el mismo id.
.columnas_iniciales{
Los selectores que empiecen con un punto '.' señalan al DIV, SPAN o P que tenga el nombre de clase indicado (por ejemplo: div class="columnas_iniciales"). Si existen varios elementos con el mismo nombre de clase, el estilo se aplicará a todos ellos.
table {
table th{
table td{ ...
También podemos encontrar indicaciones a estructuras tradicionales de html en extinción como 'table' que tienen sus propias características. En este ejemplo se pueden aplicar estilos a las tablas en general, a los titulos de las tablas (table_th) o bien a las celdas (table_td).
#div_1 a{
.clase_1 a{
section a{
Cuando un selector acaba en '(espacio) + a' (independientemente de cómo empiece) los atributos que le sigen serán aplicados a todos los enlaces que estén dentro de dicho DIV, SPAN o P (si el selector empieza con '#'), o clase (si empieza con '.') o del apartado o sección indicado.
#div1 a:hover{
.clase_1 a:hover{
section a:hover{
Cuando un selector acaba en ' a:hover' (independientemente de cómo empiece) los atributos que siguen serán aplicados a los enlaces cuando el cursor se coloque encima. Si el selector empieza por '#' estos enlaces estarán dentro de un DIV, SPAN o P, si empieza por '.' se estará haciendo referencia a un nombre de clase y si no empieza con ninguna de estas, se estará indicando el nombre de algunas de las etiquetas semánticas de HTML5.
@ keyframes animacion_final{
Cuando un selector empieza con '@' indica que las líneas de código que le siguen pertenecen a la explicación de una animación. En ellas se explica paso a paso en qué consiste y qué movimientos tiene que realizar dicha animación.
input{
Con input se identifican aquellos elementos de un formulario que permiten al usuario introducir datos. De esta manera es posible aplicar estilos a los elementos '<input type...'> propios de los formularios de HTML5 (forms 2.0).
[required]{
Aunque se explicará con mucho más detenimiento al final del tema 'Formularios', este selector indica los atributos que tienen que aplicarse a los elementos de un formulario que tengan la propiedad 'required' y que estén correctamente rellenados.
:invalid{
Aunque -conjuntamente con el selector anterior- también se explicará con mucha más extensión al final del tema 'Formularios', este selector indica los atributos que tienen que aplicarse a los elementos de un formulario que no hayan sido correctamente introducidos o que siendo obligatorios no hayan sido rellenados.
