Selectores y Especificidad

Clase 3 de 32 • Curso de CSS

Resumen

Domina cómo aplicar estilos con precisión en CSS usando elementos, clases, ID, pseudoclases, especificidad y herencia. Aprende a evitar estilos repetidos, a inspeccionar el HTML en el navegador y a controlar cambios de estado como el hover con reglas claras y reutilizables.

¿Cómo seleccionar en CSS: elementos, clases e ID?

Trabajar con selectores es la base. Un selector de etiqueta aplica estilos a todas las etiquetas del mismo tipo. Las clases son reutilizables en múltiples elementos. Los ID son únicos y deben usarse para casos puntuales, especialmente cuando más adelante se interactúe con JavaScript.

Usa el inspector del navegador: clic derecho y abrir inspector para ver HTML y estilos aplicados.
Selector de etiqueta: afecta todas las etiquetas del mismo nombre.
Selector de clase: se invoca con punto y puede repetirse en varios elementos.
Selector de ID: se invoca con numeral y solo debe existir una vez.
Evita estilos en línea como práctica habitual: tienen demasiado peso y complican el mantenimiento.

Ejemplos.

/* Selector de etiqueta: se replica en todos los elementos

¿Cómo ser más específico: selectores descendientes y contenedores?

Cuando no conviene crear más clases, los selectores descendientes permiten aplicar estilos solo a elementos dentro de un contenedor con clase. Esto evita “pisarse” entre estilos y mejora el control.

Contenedor con clase: agrupa elementos relacionados.
Selector descendiente: se escribe con un espacio entre el contenedor y el elemento objetivo.
Solo afecta a los hijos dentro del contenedor indicado.

Ejemplos.

/* Estilo del contenedor */
.contenedor {
  border: 2px solid blue;
}

/* Solo

¿Cómo usar pseudoclases y manejar especificidad y herencia?

Las pseudoclases cambian estilos según el estado de un elemento. Útiles para indicar interacción visual como el hover en enlaces y botones. Además, conocer la especificidad y la herencia evita conflictos al crecer el proyecto.

¿Qué hacen las pseudoclases hover, link y visits?

hover: aplica estilos cuando el puntero pasa encima.
link: aplica a enlaces no visitados.
visits: aplica a enlaces ya visitados.

Ejemplos.

/* Estado de interacción en botón */
button:hover {
  background: lightblue;
  cursor: pointer;
}

/* Enlace no visitado */
a:link {
  color: green;
}

/* Enlace visitado */
a:visited {
  color: yellow;
}

¿Cómo funciona la especificidad en CSS?

Piensa la especificidad como un sistema de puntos que define qué regla gana.

Elementos/etiquetas: 1 punto.
Clases: 10 puntos.
ID: 100 puntos.
Estilos inline: 1000 puntos.
importance: sobrescribe casi cualquier regla.

Claves prácticas.

Los ID reescriben clases y etiquetas.
Los estilos inline y importance deben usarse con cuidado.
A mayor especificidad, más control, pero también más riesgo de conflictos.

¿Qué se hereda y qué no en CSS?

La herencia transmite estilos desde el contenedor padre a sus hijos cuando aplica a propiedades de texto.

Se heredan: color, familia tipográfica, tamaño de fuente, alineación de texto y estilos de fuente.
No se heredan: margin, padding, border, background, width, height, position.

Ejemplo de herencia.

/* El color se hereda a los hijos, como

¿Tienes dudas o un caso específico con selectores, pseudoclases o especificidad? Comenta y cuéntame qué estás intentando lograr.

Dario Mendoza

student•

Los selectores en CSS son herramientas que permiten seleccionar elementos HTML para aplicarles estilos. Sirven para definir a qué elementos se les aplicarán reglas de estilo específicas. Existen diferentes tipos de selectores:

Selectores de etiqueta: seleccionan elementos por su nombre (ej. p para párrafos).
Selectores de clase: seleccionan elementos que tienen una clase específica (ej. .clase).
Selectores de ID: seleccionan un único elemento con un ID específico (ej. #id).
Selectores descendientes: aplican estilos a elementos dentro de otros (ej. .contenedor p aplica estilos a párrafos dentro de un contenedor).
Pseudoclases: seleccionan elementos basados en su estado (ej. :hover).

Utilizar selectores de manera efectiva ayuda a crear estilos más organizados y específicos.

Daniela Angulo Ruiz

student•

Samuel Steven Bernal Martínez

student•

Imagina que estás en un gran evento y quieres encontrar a una persona específica entre una multitud. Los selectores CSS son como diferentes formas de buscar a esa persona:

Selector de etiqueta (elemento): Busca a alguien con un tipo de ropa específica, como una camiseta roja. Esto es similar a seleccionar todos los elementos <p> en una página.
Selector de clase: Busca a personas que llevan una insignia que dice "participante". Así, puedes encontrar a todos los que comparten esa clase de insignia, como .participante.
Selector de ID: Busca a alguien con un nombre único, como "Juan". Aquí, solo habrá una persona con ese ID en toda la multitud, como #juan.
Selectores descendientes: Imagina que buscas a alguien dentro de un grupo específico, como todos los asistentes en una mesa particular. Esto es como seleccionar todos los párrafos dentro de una sección con clase contenedor.
Pseudoclases: Piensa en cómo una persona se comporta de manera diferente si está interactuando contigo, como cuando alguien sonríe cuando te ve. En CSS, esto se refiere a cambios en el estilo, como :hover cuando pasas el mouse sobre un elemento.

Pedro Abel Beltrán Disciplina

student•

The CSS combinators also are important

# What are CSS combinators?

CSS combinators are symbols that define the relationship between selectors.

They allow targeting elements based on their position in the DOM relative to other elements.

## Types

Descendant combinator
Child combinator
Adjacent sibling combinator
General sibling combinator

# Descendant combinator

Symbol: (space)

It selects all elements that are inside (at any level) a specified ancestor.

Example:

div p {
  color: blue;
}

This rule makes all \<p> elements inside a \<div> blue.

# Child combinator

Symbol: >

It selects elements that are *direct* children of a specified element.

Example:

div > p {
  color: red;
}

Only \<p> that are direct children of \<div> will be styled, not deeper ones.

# Adjacent sibling combinator

Symbol: +

It selects the element that comes immediately after another element, on the same level.

Example:

h1 + p {
  font-weight: bold;
}

The \<p> right after an \<h1> will be bold.

# General sibling combinator

Symbol: \~

It selects all siblings that come after a specified element, not only the first one.

Example:

h1 ~ p {
  color: green;
}

All \<p> siblings after an \<h1> will be green.

Christian Andrés Moreno Quiñones

student•

Don't forget: Herencia de estilos. 👨‍👦‍👦

✅ Estilos heredables:

Color.
Familia.
Tamaño.
Alineación.
Demás elementos de las fuentes.

❎ Estilos no heredables:

Margin.
Padding.
Border.
Background.
Width.
Height.
Position.

Sergio Baudilio Pinilla Martinez

student•

En CSS la prioridad de estilos se define por la especificidad.

Orden de mayor a menor prioridad:

!important
Estilos en línea (style="")
ID (#id)
Clase (.clase), atributos y pseudo-clases
Elementos (div, p, h1, etc.)

Si un elemento tiene un estilo por ID y otro por clase, se aplicará el del ID porque tiene mayor especificidad.

Ejemplo:

HTML

<p id="titulo" class="texto">Hola</p>

CSS

#titulo { color: red; } → Gana

.texto { color: blue; }

Carlos Rubén Díaz Gutiérrez

student•

En el resumen de la clase hay un error, ya que se menciona importance y la declaración correcta es !important.

Javier Hernando Suarez Pachon

student•

La especificidad del hijo directo !!! (0, 1, 1):

Moises Hernandez

student•

Hice un ejemplo con estilos para entender un poco como se suman los valores

index.html

<!DOCTYPE html>
<html lang="es">

<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Clase 2: Selectores, Especificidad y Herencia CSS</title>
   <link rel="stylesheet" href="styles.css">
</head>

<body>
   <p>Hola soy un parrado</p>
   <div class="clase-contenedor">
      <p>Soy un párrafo dentro de un contenedor</p>
      <p class="parrafo-rojo">soy otro párrafo dentro de un contenedor</p>
   </div>
</body>

</html>

styles.css

/* etiqueta vale 0,0,0,1 */
p {
   color: green;
}

/* el selector de tipo clase vale    0,0,1,0 
   mas el selector de tipo etiqueta+ 0,0,0,1
   valor total de Especificidad = 0,0,1,1 
*/
.clase-contenedor p {
   color: blue;
}


/* el selector de tipo clase vale    0,0,1,0
   tenemos dos clases               +0,0,1,0
   valor total de Especificidad = 0,0,2,0
*/
.clase-contenedor .parrafo-rojo {
   color: red;
}

/* 
Conclusión:
- El selector de etiqueta `p` tiene la especificidad más baja: 0,0,0,1
- El selector de clase + etiqueta `.clase-contenedor p` tiene especificidad 0,0,1,1 → más alto que solo `p`
- El selector con dos clases `.clase-contenedor .parrafo-rojo` tiene especificidad 0,0,2,0 → más alto aún

Por eso:
p { color: green; } aplica a todos los <p>,
pero se sobrescribe si hay selectores más específicos
como `.clase-contenedor p` (azul) o 
`.clase-contenedor .parrafo-rojo` (rojo).
*/

<!DOCTYPE html>
<html lang="es">

<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Clase 2: Selectores, Especificidad y Herencia CSS</title>
   <link rel="stylesheet" href="styles.css">
</head>

<body>
   <p>Hola soy un parrado</p>
   <div class="clase-contenedor">
      <p>Soy un párrafo dentro de un contenedor</p>
      <p class="parrafo-rojo">soy otro párrafo dentro de un contenedor</p>
   </div>
</body>

</html>

/* etiqueta vale 0,0,0,1 */
p {
   color: green;
}

/* el selector de tipo clase vale    0,0,1,0 
   mas el selector de tipo etiqueta+ 0,0,0,1
   valor total de Especificidad = 0,0,1,1 
*/
.clase-contenedor p {
   color: blue;
}


/* el selector de tipo clase vale    0,0,1,0
   tenemos dos clases               +0,0,1,0
   valor total de Especificidad = 0,0,2,0
*/
.clase-contenedor .parrafo-rojo {
   color: red;
}

/* 
Conclusión:
- El selector de etiqueta `p` tiene la especificidad más baja: 0,0,0,1
- El selector de clase + etiqueta `.clase-contenedor p` tiene especificidad 0,0,1,1 → más alto que solo `p`
- El selector con dos clases `.clase-contenedor .parrafo-rojo` tiene especificidad 0,0,2,0 → más alto aún

Por eso:
p { color: green; } aplica a todos los <p>,
pero se sobrescribe si hay selectores más específicos
como `.clase-contenedor p` (azul) o 
`.clase-contenedor .parrafo-rojo` (rojo).
*/

Selectores y Especificidad

Fundamentos de CSS

De la idea al estilo con CSS

CSS: qué es y formas de aplicar estilos en HTML

Selectores y Especificidad

Pseudo-clases y Elementos

Box Model

Position CSS

Organización BEM

Unidades de medida

Proyecto final: portafolio profesional con HTML y CSS

Tipografía y legibilidad

Fuentes Web

Propiedades Tipográficas

Control de Texto

Aplicación de fuentes de Google y estilos CSS al portafolio

Colores Estilos

Sistemas de Color

Variables CSS

Degradados

Sombras y Bordes

Aplicación de gradientes, sombras y esquinas redondeadas al portafolio

Layouts Modernos

Introducción Flexbox

Flexbox Avanzado

Grid Básico

Grid Avanzado

Aplicación de flexbox y grid en tu portafolio web

Responsive Design

Media Queries

Diseño Fluido

Mobile First

Reto Responsive

Efectos y Animaciones

Transformaciones

Transiciones

Transiciones aplicadas

Animaciones

Proyecto Final