:has()::nth-child(n of S) polyfill⚠️ Your browser does not support the :nth-child(1 of S)/:nth-last-child(1 of S) selectors but that’s no biggie. Thanks to :not() and :has() we can polyfill it.
✅ Your browser supports the :nth-child(1 of S)/:nth-last-child(1 of S) selectors. However, they are not used because this demo demonstrates how :not() and :has() can polyfill them.
🚨 Your browser does not support CSS :has(), so this demo will not work correctly.
🚨 Your browser does not support relative selectors in CSS :has(), so this demo will not work correctly.
This page is a demo for https://brm.us/nth-child-polyfill. Please read the post to get the full details and explanation.
:nth-child(): The .special children, from first to last, have rainbow colors: red, orange, yellow, green, blue, indigo, and violet.:nth-last-child(): The .special children, from last to first, have a different border thickness.Typically you’d use :nth-child(n of S) for this, but thanks to :has() we can polyfill it.
TIP: You can click each paragraph to toggle the .special class
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque in, enim rem recusandae mollitia error, natus ab atque dignissimos culpa veniam exercitationem sequi voluptates, commodi corrupti ullam sit. Debitis, a!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque in, enim rem recusandae mollitia error, natus ab atque dignissimos culpa veniam exercitationem sequi voluptates, commodi corrupti ullam sit. Debitis, a!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque in, enim rem recusandae mollitia error, natus ab atque dignissimos culpa veniam exercitationem sequi voluptates, commodi corrupti ullam sit. Debitis, a!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque in, enim rem recusandae mollitia error, natus ab atque dignissimos culpa veniam exercitationem sequi voluptates, commodi corrupti ullam sit. Debitis, a!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque in, enim rem recusandae mollitia error, natus ab atque dignissimos culpa veniam exercitationem sequi voluptates, commodi corrupti ullam sit. Debitis, a!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque in, enim rem recusandae mollitia error, natus ab atque dignissimos culpa veniam exercitationem sequi voluptates, commodi corrupti ullam sit. Debitis, a!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque in, enim rem recusandae mollitia error, natus ab atque dignissimos culpa veniam exercitationem sequi voluptates, commodi corrupti ullam sit. Debitis, a!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque in, enim rem recusandae mollitia error, natus ab atque dignissimos culpa veniam exercitationem sequi voluptates, commodi corrupti ullam sit. Debitis, a!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque in, enim rem recusandae mollitia error, natus ab atque dignissimos culpa veniam exercitationem sequi voluptates, commodi corrupti ullam sit. Debitis, a!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque in, enim rem recusandae mollitia error, natus ab atque dignissimos culpa veniam exercitationem sequi voluptates, commodi corrupti ullam sit. Debitis, a!