ARQUITECTURA CSS

Pseudoclases CSS

Controlar estados, excepciones y orden sin tocar el HTML

Domina las pseudoclases CSS para crear interfaces interactivas. Controla estados como hover, excluye elementos y selecciona por posición para un código más limpio y eficiente.

1

Estados interactivos en enlaces

Los enlaces pueden reaccionar a distintas acciones del usuario. Para demostrarlo, creamos una navegación simple con varios enlaces que luego podrán cambiar su apariencia según el estado de interacción.

<!-- Navegación principal con enlaces -->
<nav class="menu">
  <!-- Cada enlace representa una acción distinta del usuario -->
  <a href="#inicio">Inicio</a>
  <a href="#servicios">Servicios</a>
  <a href="#contacto">Contacto</a>
</nav>
Estructura HTML básica con enlaces para aplicar pseudoclases
Los enlaces HTML sirven como base para aplicar pseudoclases de interacción.
2

Uso de :link, :hover, :active y :visited

Las pseudoclases permiten aplicar estilos según el estado del enlace, como si fue visitado, si el mouse está encima o si se está presionando. Esto mejora la experiencia visual y la usabilidad.

/* Enlaces que aún no fueron visitados */
a:link {
  /* Se usa para diferenciar enlaces nuevos */
  color: darkblue;
  background-color: lightcyan;
}

/* Enlace cuando el mouse pasa por encima */
a:hover {
  /* Refuerza visualmente la interacción */
  background-color: navy;
  color: white;
  padding: 12px;
}

/* Enlace mientras se hace click */
a:active {
  /* Indica que el enlace está siendo presionado */
  background-color: gold;
  color: black;
}

/* Enlaces ya visitados */
a:visited {
  /* Permite distinguir navegación previa */
  color: gray;
}
Estados visuales de enlaces usando pseudoclases CSS
Cada pseudoclase representa una etapa distinta de interacción del usuario.
3

Estructura de contenedores anidados

Para aplicar estilos selectivos, es necesario contar con una estructura clara. En este ejemplo usamos varios div con clases distintas para luego excluir algunos mediante pseudoclases.

<!-- Contenedor principal -->
<div class="contenedor">
  <!-- Elemento que no debería recibir ciertos estilos -->
  <div class="item">Item</div>

  <!-- Elementos genéricos -->
  <div>Elemento A</div>
  <div>Elemento B</div>
</div>
4

Excluir elementos con :not()

La pseudoclase :not() permite aplicar estilos a un conjunto amplio de elementos evitando algunos específicos. Es muy útil para reducir código y mantener reglas claras y reutilizables.

/* Aplica estilos a todos los div excepto los que tengan la clase .item */
div:not(.item) {
  /* Se evita afectar el contenedor principal */
  padding-left: 40px;
  background-color: #f2f2f2;
}
Uso de la pseudoclase :not para excluir elementos
:not permite definir excepciones sin crear selectores complejos.
5

Listado de elementos hijos

Cuando varios elementos comparten un mismo padre, podemos aprovechar su posición para aplicar estilos específicos. Esta estructura es ideal para aprender a usar pseudoclases basadas en orden.

<!-- Contenedor padre -->
<div class="padre">
  <!-- Elementos hijos -->
  <div>Primer hijo</div>
  <div>Segundo hijo</div>
  <div>Tercer hijo</div>
</div>
Elementos hijos dentro de un contenedor padre
La posición de cada hijo permite aplicar estilos selectivos.
6

Seleccionar por posición con :nth-child()

La pseudoclase :nth-child() permite aplicar estilos según la posición de un elemento dentro de su padre. Es clave para listas, grillas y estructuras repetitivas sin usar clases extra.

/* Selecciona el segundo hijo dentro del contenedor .padre */
.padre div:nth-child(2) {
  /* Se destaca visualmente el elemento por su posición */
  font-weight: bold;
  color: orange;
}
Uso de nth-child para seleccionar elementos por posición
nth-child permite estilizar sin modificar el HTML.

Lección anterior

Diseño web adaptable usando Media Queries en CSS
Las Media Queries permiten adaptar el diseño a distintos tamaños de pantalla.

Media Queries y diseño responsive en CSS

Domina el diseño responsive con Media Queries: define breakpoints, aplica Mobile First y adapta layouts y tipografía para interfaces perfectas en cualquier pantalla.

Comenzar Lección

Lección actual

Ejemplos de pseudoclases CSS aplicadas a enlaces y contenedores
Las pseudoclases permiten definir estilos según estado, exclusión y posición.

Pseudoclases CSS

Domina las pseudoclases CSS para crear interfaces interactivas. Controla estados como hover, excluye elementos y selecciona por posición para un código más limpio y eficiente.

Lección actual

Lección siguiente

Ejes, gradientes y transformaciones aplicadas a elementos CSS
Los efectos visuales en CSS se basan en ejes, fondos y transformaciones.

Efectos visuales y movimiento con CSS

Aprende a manejar el espacio visual con ejes, aplicar gradientes, transformar y animar elementos. Crea interfaces modernas y dinámicas con efectos visuales profesionales en CSS.

Comenzar Lección
¿Qué son las pseudoclases CSS y para qué sirven?⌄Las pseudoclases CSS permiten aplicar estilos según el estado, la posición o la interacción de un elemento, sin modificar el HTML. Son clave para mejorar usabilidad, claridad visual y mantener una arquitectura de estilos limpia.
¿Qué estados de un enlace se pueden estilizar con pseudoclases?⌄Los enlaces pueden estilizarse según si no fueron visitados, si el usuario pasa el mouse, si está haciendo click o si ya fueron visitados. Esto mejora la experiencia de navegación y la retroalimentación visual.
¿Para qué sirve la pseudoclase :link en CSS?⌄La pseudoclase :link se usa para aplicar estilos a enlaces que aún no fueron visitados. Permite diferenciar enlaces nuevos dentro de la navegación y mejorar la orientación del usuario.
¿Qué función cumple la pseudoclase :hover?⌄La pseudoclase :hover aplica estilos cuando el cursor pasa sobre un elemento. Se utiliza para reforzar visualmente la interacción, mejorar la usabilidad y comunicar que un elemento es interactivo.
¿Cuándo se activa la pseudoclase :active en un enlace?⌄La pseudoclase :active se activa mientras el usuario mantiene presionado un enlace. Es útil para indicar que la acción está en curso y aportar una respuesta visual inmediata.
¿Para qué se usa la pseudoclase :visited?⌄La pseudoclase :visited permite aplicar estilos a enlaces que ya fueron visitados. Ayuda a distinguir recorridos previos y mejora la navegación, aunque tiene limitaciones por razones de seguridad.
¿Por qué es importante el orden de las pseudoclases en enlaces?⌄El orden de las pseudoclases afecta qué estilos se aplican por la cascada CSS. Definirlas correctamente evita conflictos y asegura que cada estado del enlace se muestre como se espera.
¿Qué es la pseudoclase :not() en CSS?⌄La pseudoclase :not() permite excluir elementos específicos de una regla de estilo. Facilita escribir selectores más claros, reducir duplicación de código y mejorar el mantenimiento del CSS.
¿Para qué sirve usar :not() en lugar de múltiples selectores?⌄Usar :not() evita crear selectores largos o redundantes. Permite definir reglas generales con excepciones claras, lo que mejora la legibilidad y la arquitectura del código CSS.
¿Qué problema común resuelve la pseudoclase :not()?⌄Resuelve el problema de aplicar estilos globales sin afectar ciertos elementos específicos. Es ideal cuando algunos nodos deben excluirse sin agregar clases extra al HTML.