#pseudoselector

CSS Selectors and Specificity by Abdelfattah Ragab

Welcome to the book "CSS Selectors and Specificity". In this book, I explain the different types of selectors, from simple element selectors to advanced attribute selectors and pseudo-classes. You will understand how specificity and cascading work and how to write CSS rules that deliver predictable and desired results. By the end of this book, you will be confident in using CSS selectors and have mastered all possible scenarios. Let’s go!

Available on https://shop.tredition.com and https://www.amazon.com

This idea comes on my mind when I was working on http://discovervanuatu.com.au. I needed to skin checkboxes really quickly and I didn’t want to use another jQuery plugin - just because I didn’t want to increase the overall javascript size if I need to skin 3 checkboxes only.

The solution is easy - just add one span right after an input, skin that span, hide the input and skin the span if the input is selected. The last thing might look as a blocker, but using pseudo-selector “:checked” brings some light on that.

Crucial is to select the right span, which we can achive by using a selector “+”. So the the whole magic is this: “input:checked + span”.

Last thing that is good to think about is to cache the checked state. The cross sign should be image and there might be small delay between first click and showing the checked state. There are several ways how to deal with this - using a sprite sheet, an inline image in CSS and so on. I’ve choosed to inline the image in the CSS using base64 encoding. Fast and easy…

The full solution is here: http://jsfiddle.net/lucien144/s9mmbz88

This should work in all new browsers and IE9+. Actually tested in IE9, FF, Safari 8, Chrome and Safari 8 on iOS.