Skip to content

Answering the age-old question of ‘What does this CSS selector do?’

Notifications You must be signed in to change notification settings

selectors/selectors.io

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#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

About

Answering the age-old question of ‘What does this CSS selector do?’

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published