CSS (Cascading Style Sheets) es el lenguaje utilizado para estilizar páginas web. Los selectores son fundamentales en CSS, ya que permiten especificar a qué elementos HTML se aplicarán los estilos. Existen varios tipos de selectores, cada uno diseñado para seleccionar elementos de manera precisa o general.
¿Qué son los selectores CSS?
Los selectores CSS son patrones que se utilizan para seleccionar los elementos HTML a los que se aplicarán los estilos CSS. En otras palabras, te permiten decirle al navegador qué elementos quieres modificar visualmente.
Tipos de selectores básicos:
- Selector de etiqueta (o tipo):
- Selecciona todos los elementos HTML que coincidan con el nombre de la etiqueta.
- Ejemplo: p {color: blue;} (esto aplicaría el color azul a todos los párrafos <p>).
- Uso: son utilizados para definir estilos generales para etiquetas HTML comunes, como párrafos, encabezados o listas.
Ilustración 1 Etiquetas
- Selector de clase:
- Selecciona todos los elementos HTML que tengan un atributo class específico.
- Se representa con un punto (.) seguido del nombre de la clase.
- Ejemplo: destacado { font-weight: bold; } (esto aplicaría negrita a todos los elementos con class=”destacado”).
- Uso: son muy útiles para aplicar estilos a grupos de elementos que comparten una característica visual.
Ilustración 2 selector de clase
- Selector de ID:
- Selecciona un único elemento HTML que tenga un atributo id específico.
- Se representa con una almohadilla (#) seguida del nombre del ID.
- Ejemplo: #titulo-principal { font-size: 24px; } (esto aplicaría un tamaño de fuente de 24 píxeles al elemento con id=”titulo-principal”).
- Uso: se utilizan para aplicar estilos únicos a elementos específicos de la página.
Ilustración 3 selector de identificador
- Selector universal:
- Selecciona todos los elementos HTML de la página.
- Se representa con un asterisco (*).
- Ejemplo: * { margin: 0; padding: 0; } (esto eliminaría los márgenes y el relleno predeterminados de todos los elementos).
- Uso: se utiliza principalmente para aplicar estilos generales a toda la página, como restablecer los estilos predeterminados del navegador.
- Selector de atributo:
- Selecciona elementos HTML basados en la presencia o el valor de un atributo.
- Ejemplo: a[href] {color: green;}(Selecciona todos los enlaces que tengan un atributo href).
- Ejemplo: input[type=”text”] {border: 1px solid red;} (Selecciona todos los campos de entrada de texto).
- Uso: son muy utiles cuando necesitas aplicar estilos basados en atributos especificos de los elementos HTML.
Selector de presencia de atributo:
- [atributo]
- Selecciona todos los elementos que tienen el atributo especificado, independientemente de su valor.
- Ejemplo:
- a[href] { color: blue; } (Selecciona todos los enlaces que tienen el atributo href).
Selector de valor de atributo exacto:
- [atributo=”valor”]
- Selecciona todos los elementos que tienen el atributo especificado con el valor exacto especificado.
- Ejemplo:
- input[type=”text”] { border: 1px solid red; } (Selecciona todos los campos de entrada de texto).
Selector de valor de atributo parcial:
- [atributo~=”valor”]
- Selecciona elementos cuyo atributo contiene una lista de palabras separadas por espacios, y una de esas palabras es igual al valor especificado.
- Ejemplo:
- img[class~=”icono”] { border: 2px solid green; } (Selecciona todas las imágenes cuya clase contiene la palabra “icono”).
- [atributo|=”valor”]
- Selecciona elementos cuyo atributo comienza con el valor especificado, seguido de un guión o nada.
- Ejemplo:
- [lang|=”en”] { color: blue; } (Selecciona elementos con el atributo lang que comienza con “en”).
- [atributo^=”valor”]
- Selecciona elementos cuyo atributo comienza con el valor especificado.
- Ejemplo:
- a[href^=”https://”] { font-weight: bold; } (Selecciona todos los enlaces cuyo atributo href comienza con “https://”).
- [atributo$=”valor”]
- Selecciona elementos cuyo atributo termina con el valor especificado.
- Ejemplo:
- a[href$=”.pdf”] { color: red; } (Selecciona todos los enlaces cuyo atributo href termina con “.pdf”).
- [atributo*=”valor”]
- Selecciona elementos cuyo atributo contiene el valor especificado en cualquier parte.
- Ejemplo:
- a[href*=”ejemplo”] { background-color: yellow; } (Selecciona todos los enlaces cuyo atributo href contiene la palabra “ejemplo”).