Selectores CSS

Los selectores CSS permiten apuntar a elementos específicos en una página web para aplicarles estilos. Son una parte fundamental de CSS y desempeñan un papel crucial en la creación de sitios web bien estructurados y visualmente atractivos. Exploremos algunos de los selectores CSS más utilizados y comprendamos cómo funcionan.

Selector de tipo

El selector de tipo CSS apunta a todos los elementos de un tipo específico en una página web. Está representado por el nombre del elemento sin ningún prefijo. Por ejemplo, para aplicar estilos a todos los elementos <p>, el selector CSS sería «p«. La sintaxis es simple y efectiva, lo que lo convierte en uno de los selectores más sencillos de usar. A continuación se muestra un ejemplo de cómo funciona el selector de tipo:

p {
  color: blue;
}

Este código establecerá el color de todos los elementos <p> de la página en azul.

Selector de ID

El selector de ID se indica con el símbolo de almohadilla (#) seguido del ID del elemento de destino. Se utiliza para seleccionar un elemento único en la página. La sintaxis del selector de ID es la siguiente:

#uniqueID {
  background-color: yellow;
}

En este ejemplo, el elemento con el ID «uniqueID» tendrá un color de fondo amarillo.

Selector de clase

El selector de clase apunta a elementos con un atributo de clase específico. Se indica con un punto (.) seguido del nombre de la clase. Varios elementos pueden compartir la misma clase, lo que permite un estilo coherente en varias partes de la página. A continuación se muestra un ejemplo del selector de clase en acción:

.special {
  font-weight: bold;
}

Este código pondrá en negrita todos los elementos con la clase «especial».

Selector universal

El selector universal, indicado por un asterisco (*), apunta a todos los elementos de la página. Puede resultar útil para aplicar un estilo global o restablecer todos los elementos. A continuación se muestra un ejemplo del selector universal:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Este código establece el margen, el relleno y el tamaño del cuadro de todos los elementos para crear un diseño coherente.

Selector de atributo

El selector de atributo CSS proporciona una manera de apuntar a elementos HTML en función de la presencia de atributos o valores de atributos específicos. Este selector permite aplicar estilos a elementos que coinciden con ciertos criterios de atributos, mejorando la flexibilidad y el control del estilo de las páginas web.

La sintaxis del selector de atributo CSS es la siguiente:

• [atributo]: Selecciona elementos con el atributo especificado, independientemente de su valor.
• [atributo=valor]: selecciona elementos con el atributo y valor especificados.
• [atributo~=valor] : Selecciona elementos con un valor de atributo que contiene una palabra específica, delimitada por espacios.
• [atributo | = valor]: selecciona elementos con un valor de atributo que es exactamente o comienza con el valor especificado, seguido de un guión.
• [atributo^=valor]: selecciona elementos con un valor de atributo que comienza con el valor especificado.
• [atributo$=valor]: selecciona elementos con un valor de atributo que termina con el valor especificado.
• [atributo*=valor]: selecciona elementos con un valor de atributo que contiene el valor especificado.

Por ejemplo, para apuntar a todos los elementos de anclaje con un atributo «destino» específico, el selector de atributos CSS se puede utilizar de la siguiente manera:

a[target="_blank"] {
  color: #ff0000;
}

En este ejemplo, el selector de atributos CSS apunta a elementos de anclaje con el atributo «destino» establecido en «_blank» y cambia el color del texto a rojo.

Agrupar selectores CSS

La agrupación de selectores permite aplicar las mismas reglas de estilo a varios selectores. Se logra separando los selectores con una coma. Esta técnica ayuda a reducir la redundancia y optimizar el código CSS. A continuación se muestra un ejemplo de agrupación de selectores:

h1, h2, h3 {
  color: #FF0000;
}

Este código establece el color de los elementos <h1>, <h2> y <h3> en rojo.

Conclusión

Los selectores CSS son esenciales para diseñar páginas web de forma eficaz. Comprender los diferentes tipos de selectores y cómo utilizarlos puede mejorar enormemente la apariencia y funcionalidad de un sitio web. Al dominar los selectores CSS, los desarrolladores pueden crear experiencias web visualmente atractivas y fáciles de usar.

Te puede interesar