Selectores de estilo CSS

En esta sección vamos a analizar lo básico sobre los 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.

67 me gusta
227 vistas
Anterior Propiedades CSS para los textos
Siguiente ¿Qué sucede si no uso estilos CSS en mi página?
Programar en HTML y CSS

Programar en HTML y CSS

En esta lista de tutoriales veremos como programar de forma clara y directa en código HTML y CSS que son la base de la web.

¿Cómo se escribe en código HTML?

En esta sección veremos los elementos y la forma en la que se debe escribir el código de hipertexto o HTML.
Tiene video

Esquema de una página HTML

En este artículo veremos el esquema básico de una página en HTML5, la última version de código HTML que existe.

¿Existen reglas para escribir código HTML?

En este artículo analizaremos la forma correcta de escribir en código HTML.

¿Para qué sirve el código CSS?

Aquí veremos para que sirven las hojas de estilo y su uso en los sitios web.

Unidades de medida CSS

En esta sección analizamos todas las unidades de medida que existen en CSS

Propiedades de estilo CSS de bloques

En este artículo vemos las propiedades de estilo que tienen los bloques utilizando una hoja de estilos CSS.

Propiedades CSS para los textos

Aquí veremos como se puede dar estilo a los textos utilizando las propiedades de estilo CSS.

Selectores de estilo CSS

En esta sección vamos a analizar lo básico sobre los selectores de estilo CSS.

¿Qué sucede si no uso estilos CSS en mi página?

En esta sección analizaremos qué es lo que sucede cuando no se utiliza ninguna hoja de estilos CSS en un sitio web.

¿Debería utilizar un framework CSS?

Muchas veces nos preguntamos si vale la pena utilizar un framework como Bootstrap o MaterialUI. En este artículo analizamos la situacion.