The FAQ page on a church website is quietly the most-used page after the home page and Plan Your Visit. It is where a first-time guest is figuring out whether parking is free, whether their kids are welcome in the service, whether they can wear jeans. Almost all of these pages are built on <details> elements — which is right — but the CSS around them is usually a small pile of attribute selectors like details[open] summary::after { ... } that a designer would never write in a sentence.
There is a cleaner way now, and as of this year it is safely in the baseline: the :open pseudo-class.
:open matches an element that is currently in its open state. It works for <details>, for <dialog>, and for elements using the Popover API — one selector for the three patterns your church website is probably already using for FAQs, prayer request modals, and calendar filter dropdowns. Instead of chasing the [open] attribute on details, remembering dialog[open] needs its own rule, and toggling classes on popovers from JavaScript, you can write one predictable pattern.
details:open summary::after { transform: rotate(90deg); }
dialog:open { animation: fade-in 200ms ease-out; }
Two quiet things it does well.
It makes the CSS read like the design brief. "When the accordion is open, rotate the chevron" is a sentence a designer would say. details[open] is a sentence a browser wrote.
It gives you a natural place to add transitions. Because :open is a pseudo-class, you can pair it with @starting-style and the transition-behavior: allow-discrete combo that shipped last year, and the FAQ accordion on your Plan Your Visit page actually animates instead of snapping. That is the difference between a page that feels considered and a page that feels like a template a volunteer set up in an afternoon.
None of this is a headline feature. But small, quiet improvements to the pages people actually read is most of what a good church website is.
If you want an unhurried second set of eyes on the FAQ or Plan Your Visit page of your church site — the CSS, the copy, the way it reads on a phone at a red light — we're glad to help.