Introducción
Hasta ahora seleccionabas por etiqueta, clase e id. Con los selectores avanzados puedes dar estilo según la posición, el estado o los atributos de un elemento, sin llenar el HTML de clases.
CSS
85
Selectores avanzados, pseudoclases y pseudoelementos
Hasta ahora seleccionabas por etiqueta, clase e id.
Código del tema: a:hover::after
📘 Teoría
Combinadores
| Selector | Nombre | Selecciona |
|---|---|---|
nav a | Descendiente | Todos los a que están dentro de nav, a cualquier profundidad. |
ul > li | Hijo directo | Los li que son hijos directos de ul. |
h2 + p | Hermano adyacente | El p que va justo después de un h2. |
h2 ~ p | Hermanos generales | Todos los p que van después de un h2, con el mismo padre. |
Selectores de atributo
a[href^="https"] { /* empieza por https: enlaces externos */ }
a[href$=".pdf"] { /* termina en .pdf */ }
img[alt=""] { /* imágenes decorativas */ }
[data-categoria="branding"] { /* atributos propios data-* */ }Los atributos data-* serán muy útiles con JavaScript (por ejemplo, para filtrar proyectos por categoría, como en la lección Eventos).
Pseudoclases: estados y posiciones
Una pseudoclase (con :) selecciona un elemento en un estado o una posición:
| Pseudoclase | Cuándo se aplica |
|---|---|
:hover | El puntero está encima. |
:focus-visible | Tiene el foco del teclado. |
:active | Se está pulsando. |
:visited | Enlace ya visitado. |
:first-child, :last-child, :nth-child(2n) | Posición entre sus hermanos. |
:not(.destacado) | Todos menos los que cumplen el selector. |
:has(img) | Elementos que contienen algo (el "selector padre"). |
:target | El elemento cuyo id coincide con el #ancla de la URL. |
/* Tarjetas que contienen una imagen: sin relleno arriba */
.tarjeta:has(img) { padding-top: 0; }
/* Filas alternas en una tabla */
tr:nth-child(even) { background: #f1f3f6; }El orden de los estados de un enlace: LoVe HaTe
Si das estilo a varios estados de un enlace, escríbelos en este orden para que no se anulen entre sí: Link, Visited, Hover, Active (LoVe HAte), y añade :focus-visible junto a :hover.
a:link { color: #1d3557; }
a:visited { color: #6a4c93; }
a:hover, a:focus-visible { color: #e63946; }
a:active { color: #9d0208; }Un visor sin JavaScript con :target
<a href="#obra-1">Ver cartel</a>
<div id="obra-1" class="visor">
<img src="img/cartel.jpg" alt="Cartel del Festival de Otoño">
<a href="#">Cerrar</a>
</div>.visor { display: none; }
.visor:target { display: grid; place-items: center; position: fixed; inset: 0; background: rgb(0 0 0 / 0.85); }Pseudoelementos: partes y añadidos
Un pseudoelemento (con ::) selecciona una parte de un elemento o añade contenido decorativo:
| Pseudoelemento | Qué hace |
|---|---|
::before, ::after | Añaden contenido antes o después (con content). |
::first-letter | La primera letra (capitulares). |
::first-line | La primera línea. |
::selection | El texto seleccionado por el usuario. |
::marker | La viñeta o número de una lista. |
/* Capitular editorial */
.articulo p:first-of-type::first-letter {
float: left;
font-size: 3.5em;
line-height: 0.9;
margin-right: 0.1em;
}
/* Subrayado decorativo bajo los títulos */
h2::after {
content: "";
display: block;
width: 3rem;
height: 4px;
background: #e63946;
margin-top: 0.5rem;
}⚠️ Atención. El contenido de ::before y ::after es decorativo: no lo uses para texto importante, porque no siempre lo leen los lectores de pantalla ni se puede seleccionar.
Especificidad
Cuando varias reglas compiten, gana la más específica. Una forma de contarla es con tres cifras (ids, clases/atributos/pseudoclases, etiquetas/pseudoelementos):
| Selector | Especificidad |
|---|---|
p | 0‑0‑1 |
.aviso | 0‑1‑0 |
nav a:hover | 0‑1‑2 |
#portada .titulo | 1‑1‑0 |
A igualdad, gana la última regla. El atributo style en el HTML y !important ganan a todo: evítalos, porque hacen el CSS difícil de mantener.
🧰 Recursos
Enlaces útiles
lenguajecss.com (Manz): Combinadores lenguajecss.com (Manz): Selectores de atributo lenguajecss.com (Manz): Pseudoclases lenguajecss.com (Manz): :has() lenguajecss.com (Manz): :not() lenguajecss.com (Manz): ::before y ::after En esta web: Selectores avanzados En esta web: El selector :has() En esta web: Pseudoelementos W3Schools: Combinadores W3Schools: Pseudoclases W3Schools: Pseudoelementos Practica jugando: CSS Diner ▶ Vídeo: Especificidad CSS: cómo evitar los !important (ManzDev) ▶ Vídeo: Selectores de CSS básicos y avanzados (para profundizar) (ManzDev) MDN: Pseudoclases MDN: Pseudoelementos MDN: Especificidad