HTML playing with CSS

Image from unsplash

I happened to use an input-label association for creating a toggle switch. Though I earlier read about the strong bonding between them but hadn’t yet come across something.

The first set of images shows CSS and input and HTML as siblings, hence style is applied with an adjacent selector.

The second set of images shows a changed selector as input is moved inside the label, called the general sibling selector.

Found this very helpful as it really saved my day :)

Thanks for reading! By the way, 👏🏻 *clap* 👏🏻 your hands for more hacks if you enjoyed this post. It encourages me to keep writing and help other people find it :)