This is what Jayesh Bhoot looks like, with a lopsided smile on its right, which almost closes his right eye while smiling, which strongly implies that he needs to work on his lazy left-side cheek muscles.

How I use :has() selector to add table of contents

Posted on

Collected in

I show off a static site gen soupault, and my solution to add table of contents using CSS selectors

Copy-pasting my comment in a converstion on lobste.rs titled The Undeniable Utility Of CSS :has:

My most recent favourite use of :has was to target insertion of a table of contents (TOC) on pages of my website.

Assuming the following configuration for the static site generator I use (soupault): 

[widgets.table-of-contents]
selector = "hgroup:has(h1)"
action = "insert_after"

the :has selector instructs soupault to only insert TOC in those pages which have an h1 heading, and to insert it right after the first hgroup of the page, so that the TOC is located right after the heading + subtitle + timestamp + tags combo.

:has is a selector best used judiciously though due to performance concerns. Firefox (and presumably other browsers) help by displaying a tortoise symbol to flag an unconstrained :has selector.

Comments