The :checked pseudo-class is an often overlooked gem in CSS. When paired with checkboxes, radio buttons, and some accompanying CSS selectors, such as the direct sibling combinator (+), it opens up some powerful applications.
Using :checked means that your CSS can react to state alone, without the need for JavaScript. This makes :checked a must in the CSS developer’s utility belt.
Watch Ryan guide you through building an iOS toggle switch using these techniques. You can download the code sample from GitHub.
[youtube XAITicOZCdk]
Ryan SeddonRyan Seddon is Tech Lead at Zendesk, an open source junkie and a CSS abuser. Coming from a specialist front-end role he's since ventured into full stack development. He regular contributes to open-source projects such as Modernizr, gives talks at conferences and is just all round enthusiastic about the software. His personal website is http://www.thecssninja.com
