Ancestors

Toot

Written by Edward Loveall on 2025-01-28 at 01:59

I always forget about the #css :target selector. It's funky, but seems like it could be a great tool in certain situations, like highlighting a header or section when a link takes you part way down the page.

https://developer.mozilla.org/en-US/docs/Web/CSS/:target

=> More informations about this toot | More toots from edward@indieweb.social

Descendants

Written by Tony Mottaz on 2025-01-29 at 01:51

@edward I’ve seen it used for a simple “client side navigation” or like a top-level tabs UI:

section {

display: none;

&:target {

display: block;

}

}

=> More informations about this toot | More toots from tonymottaz@fosstodon.org

Written by Edward Loveall on 2025-01-29 at 01:52

@tonymottaz Oh sure! Yeah that's clever, as long as it takes accessibility into account of course

=> More informations about this toot | More toots from edward@indieweb.social

Written by Tony Mottaz on 2025-01-29 at 03:11

@edward right, idk if it’s a good idea, but it’s clever! It’s been useful once or twice for little demos or scratchpads, like if I’m trying to visualize how some navigation or animation will work but don’t want to spin up a whole server or whatever. You can do this within a Codepen, for example

=> More informations about this toot | More toots from tonymottaz@fosstodon.org