Answering the age-old question of ‘What does this CSS selector do?’
Clone or download
Pull request Compare This branch is even with selectors:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
wireframes
.gitattributes
.gitignore
Gruntfile.js
README.md
index.html
package.json

README.md

#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