Selectores de estilo CSS
Ahora que tenemos una mejor idea de las propiedades, pasamos a los selectores de estilo, es decir colocamos propiedades solamente a ciertos elementos. Podemos hacer que todos los enlaces sean rojos y que esten en cursivas, o que las listas sean grises.
Prioridades en los estilos
En CSS nos manejamos bajo un sistema de prioridades, tanto por el orden en el que están escritas las reglas como por la especificación de los selectores. Por ejemplo, veamos el resultado de las reglas:
Y el código
El resultado será:
Además, las reglas que están escritas al final sobrescriben a las primeras, por ejemplo:
El color final será azul y no rojo.
Selectores básicos
Los selectores básicos son:
- * - Es el selector universal, cualquier regla se aplica a absolutamente todos los elementos.
- #id - Es el selector por identificador, que tiene uno de los mayores pesos ya que sobrescribe a cualquier estilo genérico.
- etiqueta - Es el selector más utilizado, pues nos permite poner un estilo a todas las etiquetas. Por ejemplo, podemos hacer que todos los títulos principales "h1" sean de color verde.
- .clase - Es el selector de clase, que es el segundo más utilizado pues nos sirve para crear bloques de estilos, por ejemplo podemos crear una clase "rojo_negrilla" para que cualquier elemento se vea rojo y en negrillas.
Selectores que combinan
A veces necesitamos combinar los selectores, para crear estilos más especificos. Asi tenemos:
- selector selector - Cuando colocamos dos selectores separados por un espacio, queremos decir que el segundo es descendiente del primero. Por ejemplo "p a", son todos los enlaces "a" que se encuentran dentro de un párrafo "p".
- selector > selector - Cuando separamos los selectores con el signo ">" quiere decir que el segundo selector es hijo directo del primero. Por ejemplo, "ul > li" son todos los elementos "li" que son descendientes directos de un "ul".
- selector + selector - Son los selectores para elementos adyacentes o hermanos, por ejemplo "h2 + p" son todos los "p" que están en la misma línea de los "h2".
Pseudo-clases de los selectores
Estas son palabras clave que se añaden a los selectores con dos puntos ":" y sirven para estados especiales. Los más comunes son:
- :hover - Para cuando el cursor del ratón esta sobre un elemento.
- :visited - Cuando el enlace ya ha sido visitado y esta en el historial del navegador.
- :focus - Cuando un elemento de un formulario ha sido seleccionado.
- :first-child - Es el primer elemento de una lista, por ejemplo, tenemos "p:first-child" para seleccionar a los primeros párrafos de una lista consecutiva.
- :last-child - Es el último elemento de una lista.
- :even - Para seleccionar todos los elementos pares de una lista
- :odd - Para seleccionar todos los elementos impares de una lista
- :nth-child( función ) - Para seleccionar los elementos de acuerdo a una función que utiliza la variable "n". Por ejemplo, para seleccionar todos los terceros párrafos, 3, 6, 9, ..., utilizamos "p:nth-child(3n + 3)"
Pseudo-elementos de los selectores
Estas son palabras clave que se añaden a los selectores con dos puntos seguidos "::" y sirven normalmente para adicionar contenido. Las dos más utilizadas son:
- ::after - Para adicionar contenido después del elemento. Por ejemplo, la regla "p::after {content:'prueba'};" va a añadir la palabra "prueba" a todos los párrafos de la página.
- ::before - Para adicionar contenido antes del elemento.
Normalmente sirven para decorar con símbolos algunos elementos, como colocar un asterisco "*" en todas las etiquetas de los campos obligatorios de un formulario.
