#merryCSSmas bundle

This is a demo page including all of the jsincss plugins shown in this year's #merryCSSmas twitter thread.

You can find the plugins in merrycssmas-bundle.js, and for this demo the styles are expressed in CSS quoted here in this HTML page alongside the HTML tests they style. This demo page uses deqaf to parse the JS-powered custom selectors and custom at-rules from CSS, but if you wanted to do this kind of parsing and processing (to only serve regular CSS and the JavaScript that's required to make the JS-powered styles you expressed in your CSS work) you can use qaffeine server-side.

Parent Selector

:has() Selector

Closest Selector

Finish
div
Finish
div
Start

First-in-Document Selector

Last-in-Document Selector

Elder Sibling Selector

Previous Sibling Selector

Select by Text Content

Regex Selector

Computed Style Selector

Nth-Letter and Nth-Word

:nth-letter()

I'm an H1 Headline

I'm an H2 Headline

I'm an H3 Headline

I'm an H4 Headline

I'm an H5 Headline
I'm an H6 Headline

:nth-word()

I'm an H1 Headline With Seven Words

I'm an H2 Headline With Seven Words

I'm an H3 Headline With Seven Words

I'm an H4 Headline With Seven Words

I'm an H5 Headline With Seven Words
I'm an H6 Headline With Seven Words

Media Pseudo-Classes

@Document Queries

@Document Demo

:not(:blank):valid & :not(:blank):invalid

Element Queries

min-characters on form inputs (Use keyboard)

Attribute Comparison Selector

Custom Specificity

Viewport Visibility Queries

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti facilis quaerat consectetur cupiditate, quasi magnam optio amet, totam doloremque praesentium dicta, et corrupti! Debitis, sapiente labore qui fugiat nemo obcaecati.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti facilis quaerat consectetur cupiditate, quasi magnam optio amet, totam doloremque praesentium dicta, et corrupti! Debitis, sapiente labore qui fugiat nemo obcaecati.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti facilis quaerat consectetur cupiditate, quasi magnam optio amet, totam doloremque praesentium dicta, et corrupti! Debitis, sapiente labore qui fugiat nemo obcaecati.

Horizontal Overflow Queries

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Navigator Queries

Storage Queries

Storage Demo

Date Queries

Protocol Queries

Deep Hover