Selectores explicados

¿Alguna vez te has encontrado escribiendo un selector CSS que termina pareciendo muy confuso, o has visto uno mientras leías el código de alguien? Eso me pasó a mí el otro día.

Esto es lo que escribí:

.site-footer__nav a:hover u003e svg ellipse:first-child { }

Al final, honestamente ni siquiera podía explicar lo que me hace a mí mismo. LOL, eso probablemente significa que había una mejor manera de escribirlo.

Pero Kitty Giraudel tiene esta nueva y útil herramienta que le explicará cualquier selector que le arroje.

Así es como explica el mío:

Un ellipseelemento siempre que sea el primer hijo de su padre en algún lugar
... dentro de un svgelemento
... directamente dentro de un a elemento siempre que esté suspendido
... en algún lugar
... dentro de un elemento con clase site-footer__nav.

¡Bravo! Para empezar, incluso escape la especificidad del selector.

Enlace directo →