:is() selector

:is() selector 🎉 the successor to :any() and :matches() sneak peak into our talk, here’s a neat gif I made with XD showing what the :is() selector syntax can do. be excited for Chrome Dev Summit y’all! https://developer.chrome.com/devsummit/

Styling elements based on sibling count

The original idea belongs to AndrĂ© LuĂ­s, but I think it could be improved to be much less verbose. André’s solution is like this: /* one item */ li:nth-child(1):nth-last-child(1) { width: 100%; } /* two items */ li:nth-child(1):nth-last-child(2), li:nth-child(2):nth-last-child(1) { width: 50%; } /* three items */ li:nth-child(1):nth-last-child(3), li:nth-child(2):nth-last-child(2), li:nth-child(3):nth-last-child(1) { width: 33.3333%; } /*… continue reading

How nth-child and nth-of-type work

The nth-child() and nth-of-type() selectors are “structural” pseudo-classes, which are classes that allow us to select elements based on information within the document tree that cannot typically be represented by other simple selectors. In the case of nth-child() and nth-of-type(), the extra information is the element’s position in the document tree in relation to its… continue reading