En esta sección, exploraremos los selectores de CSS y el concepto de especificidad, que son fundamentales para aplicar estilos de manera efectiva en tus documentos HTML. Comprender cómo funcionan los selectores y cómo se calcula la especificidad te permitirá escribir CSS más eficiente y evitar conflictos de estilo.

Los selectores de CSS son patrones utilizados para seleccionar los elementos HTML que deseas estilizar. Existen varios tipos de selectores, cada uno con su propósito y nivel de especificidad. A continuación, se presentan los tipos más comunes:

1. Selectores de Tipo: Seleccionan todos los elementos de un tipo específico.

   p {
       color: blue;
   }
   

   Este selector aplicará el color azul a todos los elementos <p>.

2. Selectores de Clase: Seleccionan elementos que tienen un atributo de clase específico.

   .highlight {
       background-color: yellow;
   }
   

   Este selector aplicará un fondo amarillo a todos los elementos con la clase highlight.

3. Selectores de ID: Seleccionan un elemento único con un atributo de ID específico.

   #header {
       font-size: 24px;
   }
   

   Este selector aplicará un tamaño de fuente de 24px al elemento con el ID header.

4. Selectores de Atributo: Seleccionan elementos basados en un atributo o valor de atributo.

   input[type="text"] {
       border: 1px solid black;
   }
   

   Este selector aplicará un borde a todos los elementos <input> de tipo texto.

5. Selectores de Descendiente: Seleccionan elementos que son descendientes de un elemento específico.

   div p {
       margin: 10px;
   }
   

   Este selector aplicará un margen a todos los elementos <p> que son descendientes de un <div>.

6. Selectores de Pseudo-clase: Seleccionan elementos en un estado específico.

   a:hover {
       color: red;
   }
   

   Este selector cambiará el color de los enlaces a rojo cuando el usuario pase el cursor sobre ellos.

La especificidad es un mecanismo que determina qué reglas de CSS se aplican cuando hay múltiples reglas que podrían aplicarse a un elemento. Se calcula con base en un sistema de puntos, donde diferentes tipos de selectores tienen diferentes valores de especificidad.

La especificidad se calcula como una tupla de cuatro valores: (a, b, c, d), donde:

• a: Número de selectores de ID en el selector.
• b: Número de selectores de clase, pseudo-clases y atributos.
• c: Número de selectores de tipo y pseudo-elementos.
• d: No se utiliza en la especificidad, pero se considera para el orden de aparición.

Considera el siguiente CSS:

• .highlight tiene una especificidad de (0, 1, 0).
• #main tiene una especificidad de (1, 0, 0).
• p tiene una especificidad de (0, 0, 1).

En caso de conflicto, el selector con la especificidad más alta se aplicará. En este ejemplo, si un elemento <p> tiene tanto la clase highlight como el ID main, el color azul se aplicará debido a la mayor especificidad del ID.

Dado el siguiente HTML, aplica estilos utilizando diferentes selectores:

Tareas:

1. Cambia el color del texto de todos los párrafos a gris.
2. Cambia el color de fondo del elemento con ID container a azul claro.
3. Cambia el color del texto del enlace cuando el usuario pase el cursor sobre él a rojo.

Solución:

Dado el siguiente CSS, determina qué color se aplicará al texto del elemento <h1>:

Solución:

El color azul se aplicará al texto del <h1> porque el selector #container h1 tiene la especificidad más alta (1, 0, 1) en comparación con .title (0, 1, 0) y h1 (0, 0, 1).

En esta sección, hemos aprendido sobre los diferentes tipos de selectores de CSS y cómo se calcula la especificidad. Estos conceptos son fundamentales para escribir CSS efectivo y evitar conflictos de estilo. En el siguiente módulo, exploraremos cómo utilizar consultas de medios para crear diseños verdaderamente responsivos.