Based on a question on the Ruby AU Slack, someone wanted to know how they could make a 2nd select box appear after an option in an original select box was selected.
I worked out today that thanks to the new :has selector in CSS, you can achieve this:
This demo will work in most modern browsers, with the exception of Internet Explorer 11 and Firefox. Selecting from the 1st select box will make the 2nd one appear, then selecting from that makes the 3rd box appear.
Given that this feature is currently not supported in either IE11 (at all) or Firefox (without enabling a configuration flag), I would be hesitant to use it in production.
Nevertheless, it’s pretty cool to see that CSS can do this and we do not have to reach for JavaScript.