Thread by @innovati

This year for #merryCSSmas I'll be covering some of the most requested styling features and how they can be used with CSS. This will be a month-long series showing ways that simple, valid CSS, and simple JavaScript functions can work together to style anything you can imagine!

Dec 1: Parent Selector 🎄🎁 Though CSS doesn't have a :parent selector, you can create your own with a small JavaScript function and use a selector like [--parent] in your CSS stylesheets today!

demo: codepen.io/tomhodgins/pen…
code: npmjs.com/package/jsincs…

#css #javascript

Dec 2: The :has() Selector ⭐️✨ Even though this selector has been specced in CSS for years, no browsers support it yet. Thankfully it's easy for us to support with a selector like [--has] in our CSS

demo: codepen.io/tomhodgins/pen…
code: github.com/tomhodgins/jsi…

#rwd #webdesign

Dec 3: Closest Selector ❄️☃️ Imagine if you could target the closest element matching another CSS selector? We can use [--closest=''] in our CSS and make it work with a little #vanillaJS

demo: codepen.io/tomhodgins/pen…
code: npmjs.com/package/jsincs…

#merryCSSmas #selector #mixin

Dec 4: First-in-document Selector 🤶🎅 Imagine a selector that works the same as document.querySelector() in JavaScript, finding the first element in the whole document matching a CSS selector

demo: codepen.io/tomhodgins/pen…
code: npmjs.com/package/jsincs…

#frontend #webdev

Dec 5: Last-in-document Selector 🧤🧣 Imagine a selector in CSS that works like document.querySelectorAll()[length - 1] in JavaScript, finding the last element in the document matching a CSS selector

demo: codepen.io/tomhodgins/pen…
code: npmjs.com/package/jsincs…

#css #selector

Dec 6: Elder Sibling Selector 🛷💨 Imagine a CSS selector that would target all previous sibling elements of another element, we can support this with a pinch of JS and a selector in CSS like [--elder]

demo: codepen.io/tomhodgins/pen…
code: npmjs.com/package/jsincs…

#css #javascript

Dec 7: Previous Sibling Selector 🎁💝 Imagine if CSS had a :previous selector to target the preceding element like previousElementSibling() does in JS. We can invent our own selector for CSS like [--previous]

demo: codepen.io/tomhodgins/pen…
code: npmjs.com/package/jsincs…

#css #web

Dec 8: Select by Text Content 🏒🥅 Have you ever wished CSS could target elements based on their text content? There are a couple ways to DIY this, the simplest is using [--contains] to match a string!

demo: codepen.io/tomhodgins/pen…
code: npmjs.com/package/jsincs…

#webdesign #js

Dec 9: Regex Selector ⛷🏂 What would a :regex() selector do in CSS? We can invent our own [--regex] selector to target elements by matching patterns in their text content!

demo: codepen.io/tomhodgins/pen…
code: npmjs.com/package/jsincs…

#regex #css #selector

Dec 10: Computed Style Selector 🍪🥛 Imagine if there was a CSS selector that targeted tags based on their computed styles. We can use a vanilla JS function and a selector like [--computed] in our CSS to do that right now!

demo & code: codepen.io/tomhodgins/pen…

#css #vanillajs

Dec 11: Nth-letter and Nth-word ❅❆ Imagine if CSS could target individual letters or words in your text content by their position 🤔💡 We can use JavaScript to dream up our own :nth-letter(n) or :nth-word(n) selectors!

code & demo: codepen.io/tomhodgins/pen…

#css #selector #html

Dec 12: Media Pseudo-Classes 🎅🦌 Ever wish CSS selectors like :playing and :paused had browser support, or selectors like :muted or :current-time() existed at all? We can invent the new ones just as easily as we can support the real ones!

code & demo: codepen.io/tomhodgins/pen…

Dec 13: @document support 🥌🧹 Are you sad that @document got postponed? No worry, JS is aware of the document's location so we can create support for our own @document in CSS today to target pages by their URL

code & demo: codepen.io/tomhodgins/pen…

#polyfill #extend #webplatform

Dec 14: :not(:blank):valid and :not(:blank):invalid 🎅☃️ These are two very specific selectors that are useful when styling forms, similar to what you can do with :placeholder-shown but not depending on a placeholder to work

code & demo: codepen.io/tomhodgins/pen…

#css #selector

Dec 15: Element Queries 🍪🤶 Ever wish you could set responsive breakpoints based on an element's own properties? It's easy to support as a pseudo-class or as a custom at-rule in CSS!

code: github.com/tomhodgins/deq…
demo: tomhodgins.github.io/deqaf-demo/dist

#elementqueries #containerqueries

Dec 16: Attribute Comparison 👼🎄 One feature I wish CSS had was the ability to compare attribute values as numbers with <, <=, ==, >=, > comparisons, thankfully we can invent our own selector for this using something like [--attr] in our CSS

code & demo: codepen.io/tomhodgins/pen…

Dec 17: Custom Specificity 🎿⛸ Have you ever wished you could set the specificity of a rule separately from the weight of its selector? Here's how to work with custom specificity levels in CSS

demo: codepen.io/tomhodgins/pen…
code: github.com/tomhodgins/jsi…

#css #webdev #webdesign

Dec 18: Viewport Visibility 🦌🛷 Write styles that apply when elements are partly or fully visible vertically inside the viewport. We can use JavaScript to support a custom at-rule in CSS by writing a feature query

demo: codepen.io/tomhodgins/pen…
code: npmjs.com/package/jsincs…

Dec 19: Horizontal Overflow ❄️💈 You can use JS to create a custom at-rule in CSS to target an element when it is horizontally overflowed, letting you to style it in ways that help the user navigate your content better

demo: codepen.io/tomhodgins/pen…
code: npmjs.com/package/jsincs…

Dec 20: Navigator Queries 🎅🧝‍ Declare styles in CSS that target different browsers based on matching information from the browser's Navigator object—this technique is useful for precise fixes in specific browser versions!

code & demo: codepen.io/tomhodgins/pen…

#css #rwd #webdev