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?VLas 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?VLos 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?VLa 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?VLa 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?VLa 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?VLa 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?VEl 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?VLa 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?VUsar :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()?VResuelve 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.