`:has()` and Next-Sibling `+` Combinator

Show QR code Hide QR code
QR code linking to https://navendu.me/tils/12-3-25-next-sibling-combinator/

The relatively new :has() pseudo-class can be combined with the next-sibling + combinator for some nifty CSS selections. I used this selection today:

.post-content blockquote p:last-of-type:not(:has(+ footer)) {
    margin-bottom: 0;
}

Which can be read as, “select the last paragraph element within blockquote elements within elements with class post-content which are not followed by a footer element.”

Webmentions • Last updated at 9:53 PM, 11th November 2025

Have you written a response to this? Send me a webmention by entering the URL.