This Is The Stupidest CSS You Could Ever Write

The other day, I was working on indexing my site’s outbound links where the links to a specific domain are listed in their own <details> element with it’s id set to the domain, like this <details id="www.iea.com">...</details>. I wanted people to be able to navigate directly to a specific domain and open it’s respective <details> element through the url hash, doing something like /linkstats/#www.iea.com.

The browser can navigate to hashes just fine, issue was opening the <details> element when navigated to. Sounds simple enough as all I needed to do was check if the queried id was a details element and open it if it was, like this:

window.addEventListener("load", (e) => {
    const elem = document.querySelector(`#${window.location.hash.substring(1)}`)
    if (elem && elem.tagName === "DETAILS") {
        elem.open = true
    }
})

Do you see the problem here? As a clue, querying www.iea.com will make a query selector like #www.iea.com.

See it now?

After a little frustration, I realized that the selector was querying and element with id www and classes iea and com, something like this:

<details id="www" class="iea com">
    ...
</details>

I didn’t want that so I had to make the dumbest CSS selector possible—[id=""], turning the query selector into this instead:

document.querySelector([id='${window.location.hash.substring(1)}'])

It looks incredibly goofy, but it’s not like you have a better way to do it. You could say that this should have been a data-* attribute, but that can’t be hash navigated to. I could have used a query parameter instead but that would require writing even goofier code.

As bad as that query selector is, at least it works.