Selectores CSS

October 1, 2022 • 10 minutos de lectura • ¿Errores o sugerencias? Edita el artículo

Selectores CSS

¿Qué es un Selector?

Sirven para definir estilos que se quiere dar a elementos específicos. Cada uno tiene su propia sintaxis y comportamiento.

Universal

Selecciona todos los elementos.

Ejemplo: * aplica fondo rosa y letras rojas a todos los elementos.

* {
  background: pink;
  color: red
}

Elemento o Tipo

Selecciona los elementos cuya etiqueta coincida.

Ejemplo: selecciona los <p> párrafos y cambia color del texto a azul.

p {
  color: blue;
}

Clase

Selecciona todos los elementos que tienen el atributo de clase dado.

Ejemplo: .incorrect aplica fondo rojo a todos los elementos que tenga la clase "incorrect".

.incorrect {
  background: red;
}

Identificador

Selecciona un elemento basado en el valor de su atributo id.

Ejemplo: #resume aplica negrita al elemento que tiene el id "resume". No se debe repetir el id en varios elementos.

#resume {
  font-weight: bold;
}

Atributo

Selecciona todos los elementos que correspondan a un atributo específico o a un valor de atributo especifico.

Ejemplo: a[href] elegirá todos los enlaces, mientras que a[href="https://notices.com"] únicamente escogerá los enlaces con la URL "https://notices.com".

a[href]{
  text-decoration: none;
  color: blue;
}

a[href="https://notices.com"] {
  color: green;
}