#Selectors.io https://selectors.io is an online CSS Selector deconstructor which aims to answer the age-old question of ‘What does this CSS selector do?’
##Examples Load up https://selectors.io and paste any of the following CSS Selectors into the selector input area at the top to have the site attempt to deconstruct them and tell you exactly what they are selecting:
| Selector | Selectors.io Deconstruction |
| :--- |
| .list-group-item > .badge + .badge
(Bootstrap) | https://selectors.io/s=.list-group-item>.badge+.badge |
| a[href^="http:"]
(A Stack Overflow question) | https://selectors.io/s=a[href^="http:"] |
| ns|*
(Selectors Level 3 W3C Recommendation) | https://selectors.io/s=ns|* |
| audio:not([controls])
(Normalize.css) | https://selectors.io/s=audio:not([controls]) |
##Compiling the Source This uses Grunt for concatenating and minifying the JavaScript files and generating CSS. This is configured through Node.js, so you'll also need to install that, then run the following command to install the packages:
npm install
After that's set up, simply point to the project's root directory and run:
grunt