Como utilizar correctamente los selectores en CSS

Los selectores son una parte fundamental de CSS, ya que permiten seleccionar y aplicar estilos a elementos específicos en un documento HTML. A través de los selectores, podemos definir reglas de estilo que afecten a un elemento en particular o a grupos de elementos. Aprender a utilizar los selectores de manera efectiva es esencial para poder controlar el aspecto de un sitio web y lograr un diseño coherente y atractivo. En esta guía, exploraremos como utilizar correctamente los selectores en CSS y cómo podemos utilizarlos para seleccionar elementos HTML y aplicar estilos de manera eficiente.

Los selectores CSS tienen su origen en la necesidad de separar el contenido de un documento HTML de su presentación visual. Hasta la aparición de CSS, la presentación de un sitio web se realizaba directamente en el código HTML a través de la utilización de atributos como «bgcolor» o «font». Esto generaba código HTML redundante y poco mantenible.

En 1994, el creador de la web Tim Berners-Lee propuso la idea de una separación entre el contenido y la presentación visual de un sitio web, lo que llevó al desarrollo de CSS. En 1996, se publicó la primera especificación de CSS, la cual incluía la definición de los selectores.

Los selectores permiten seleccionar y aplicar estilos a elementos HTML específicos, y se basan en la sintaxis de los selectores de los lenguajes de programación. Desde su introducción en CSS1, los selectores se han ido expandiendo y evolucionando para permitir una mayor flexibilidad en la selección de elementos HTML.

Hoy en día, los selectores son una parte fundamental de CSS y se utilizan en conjunto con las propiedades CSS para definir el aspecto y la presentación visual de un sitio web de manera eficiente y mantenible.

Existen muchos selectores diferentes en CSS, algunos más comunes que otros. A continuación, se presenta una lista de los principales selectores en CSS, junto con una descripción detallada y un ejemplo de uso para cada uno:

1. Selector de tipo: Este selector selecciona todos los elementos que coinciden con un tipo específico, como «div» o «p».

Este ejemplo aplicará el color azul a todos los elementos «div» en la página.

2. Selector de clase: Este selector selecciona todos los elementos que tienen una clase específica definida en el atributo «class» del elemento.

Este ejemplo aplicará el color rojo a todos los elementos que tengan la clase «mi-clase» en la página.

3. Selector de ID: Este selector selecciona un único elemento con un ID específico definido en el atributo «id» del elemento.

Este ejemplo aplicará el color verde al elemento con el ID «mi-id» en la página.

4. Selector descendente: Este selector selecciona elementos que son descendientes de otro elemento, como un elemento «p» dentro de un elemento «div».

Este ejemplo aplicará el color naranja a todos los elementos «p» que sean descendientes directos de un elemento «div» en la página.

5. Selector de hijo directo: Este selector selecciona elementos que son hijos directos de otro elemento, como un elemento «p» que sea hijo directo de un elemento «div».

Este ejemplo aplicará el color morado a todos los elementos «p» que sean hijos directos de un elemento «div» en la página.

6. Selector de atributo: Este selector selecciona elementos que tienen un atributo específico definido, como «href» en un elemento «a».

Este ejemplo aplicará el color marrón a todos los elementos «a» que tengan un atributo «href» que comience con «https» en la página.

7. Selector de pseudo-clase: Este selector selecciona elementos en función de un estado o acción específica, como cuando un elemento «a» está siendo enlazado o visitado.

Este ejemplo aplicará el color rosa a todos los elementos «a» cuando se les hace pasar el cursor del mouse sobre ellos.

8. Selector de pseudo-elemento: Este selector selecciona una parte específica de un elemento, como la primera línea de un párrafo.

Este ejemplo aplicará el color gris a la primera línea de todos los elementos «p» en la página.

Cada selector tiene sus propias características y puede ser utilizado de diferentes maneras para aplicar estilos a elementos HTML específicos. Es importante conocerlos y saber cómo utilizar correctamente los selectores en CSS para lograr un diseño web eficiente y coherente.

En CSS, la jerarquía de los selectores determina la prioridad de los estilos aplicados a un elemento en particular. Cuando se aplican varios estilos a un mismo elemento, el navegador debe decidir cuál de ellos tomará prioridad.

La jerarquía de los selectores en CSS se basa en cuatro niveles:

1. Selectores con mayor especificidad: son aquellos que utilizan una combinación de ID, atributos y pseudoclases para apuntar a un elemento muy específico en la página. Por ejemplo, un selector que utiliza un ID tendrá una mayor especificidad que uno que utiliza una clase.
2. Selectores con especificidad media: son aquellos que utilizan clases y pseudoelementos para apuntar a un elemento específico en la página. Un selector que utiliza una clase tendrá una especificidad media.
3. Selectores con menor especificidad: son aquellos que utilizan elementos HTML, pseudoclases y atributos para apuntar a un elemento en la página. Por ejemplo, un selector que apunta a todos los párrafos en una página tendrá una menor especificidad que uno que apunta a un párrafo específico con una clase.
4. Selectores universales: son aquellos que aplican estilos a todos los elementos en la página y tienen la menor especificidad.

Por lo que, cuanto mayor sea la especificidad de un selector, mayor será su prioridad en la jerarquía de CSS. En caso de que dos o más estilos tengan la misma especificidad, el estilo que se aplica por último en la hoja de estilo tendrá prioridad.

En este caso, el selector #contenedor tiene una mayor especificidad que .titulo y p, porque utiliza un ID. Por lo tanto, el color rojo se aplicará al texto del título en lugar del color azul.

Si cambiamos el selector .titulo a h1.titulo, su especificidad aumentará, lo que significa que el color azul tendrá mayor prioridad que el color rojo.

Si queremos aplicar el color verde al párrafo dentro del contenedor, podemos hacerlo aumentando la especificidad del selector p a #contenedor p. De esta forma, el color verde tendrá mayor prioridad que los estilos de los selectores anteriores.

En este ejemplo, se aplican los siguientes selectores:

• Selector de tipo: se aplica para cambiar el color del título de cada producto.
• Selector de clase: se aplica para cambiar el tamaño de la descripción de cada producto.
• Selector de ID: se aplica para agregar un borde al primer producto de la lista.
• Selector descendente: se aplica para eliminar la decoración del enlace de compra en todos los productos de la lista.
• Selector de hijo directo: se aplica para agregar un relleno a cada producto en la lista.
• Selector de atributo: se aplica para cambiar el color de fondo del enlace de compra en caso de que su atributo «href» sea igual a «#» (simulando que aún no tiene una URL real).
• Selector de pseudo-clase: se aplica para cambiar el color de fondo del enlace de compra cuando se hace hover con el cursor del ratón.
• Selector de pseudo-elemento: se aplica para agregar un título antes del listado de productos.

Este es solo un ejemplo sencillo de cómo se pueden utilizar los diferentes selectores en CSS para aplicar estilos específicos a los elementos HTML de una página web.

En este ejemplo, se han utilizado diferentes tipos de selectores para aplicar estilos a una sección de equipo con diferentes tarjetas

En resumen, como te has dado cuenta, los selectores es uno de los principales temas que debes conocer cuando comienzas a utilizar CSS, pero es un tema que siempre utilizaras cuando desarrolles un sitio web o cualquier componente, por lo que el saber como utilizar correctamente los selectores en CSS es tan importante como el hecho de poder darle un estilo en particular a cualquier elemento, ya que como lo hemos visto también existe una jerarquía al utilizar cada uno de los selectores.