CSS :has() Selector: The Layout Trick I Wish I Knew 5 Years Ago
The CSS :has() selector has become a valuable tool for frontend developers, allowing for more dynamic styling without the need for additional JavaScript. It enables developers to style elements based on their children or siblings, simplifying layouts and improving efficiency. This selector has been implemented in major browsers and has proven beneficial in real-world projects.
- ▪The :has() selector allows CSS to style elements based on their contents, changing how layouts are managed.
- ▪It has been adopted by major browsers including Chrome, Safari, Edge, and Firefox.
- ▪Developers can use :has() to eliminate the need for JavaScript in certain styling scenarios, making projects cleaner and more efficient.
Opening excerpt (first ~120 words) tap to expand
try { if(localStorage) { let currentUser = localStorage.getItem('current_user'); if (currentUser) { currentUser = JSON.parse(currentUser); if (currentUser.id === 3798270) { document.getElementById('article-show-container').classList.add('current-user-is-article-author'); } } } } catch (e) { console.error(e); } Richard Lemon Posted on May 23 • Originally published at richardlemon.com CSS :has() Selector: The Layout Trick I Wish I Knew 5 Years Ago CSS :has() is not just a fancy :parent When :has() started popping up in specs and tweets, I mentally filed it under “cool, but not for shipping work.” I was wrong. Now it is in Chrome, Safari, Edge, and Firefox. I use it in real projects. It has removed entire JavaScript files and a pile of .is-active classes that I was embarrassed to maintain.
…
Excerpt limited to ~120 words for fair-use compliance. The full article is at DEV.to (Top).
Discussion
0 commentsMore from DEV.to (Top)
