Selectoracle: a nifty little tool
Thursday, 3. April 2008, 13:35:57
I came across a handy little online tool today, useful for those who are learning CSS, or just curious.
Trying to tweak your My Opera theme (or otherwise creating a custom stylesheet) and wondering what a complicated selector in the existing stylesheet(s) actually selects? Then the Selectoracle may help. Just paste in one or more selectors (separated by semicolons), or existing whole rulesets, and the Selectoracle will translate that into plain English or Spanish. It even understands CSS3 selectors!
For instance the selector:
ul#tagnav li.first:before,
div.alttagcloud li.first:beforeis translated into:
Selects any content placed before a li element with a class attribute that contains the word first that is a descendant of an ul element with an id attribute that equals tagnav or any content placed before a li element with a class attribute that contains the word first that is a descendant of a div element with a class attribute that contains the word alttagcloud.
The various styles (shown here much like on the Selectoracle page) help in “parsing” the well-formed sentences. Nifty!
One footnote is in order:
Impressive though this little tool is, it's somewhat disappointing that the form (just three input fields) lacks label tags for all three - even though each has associated text (though confusingly marked up as H3 tags) that obviously would serve as such. Now that's a dead-easy fix! Turning those H3 tags into labels would also get rid of the problem of hierarchy of headings, jumping from the H1 to an H3.
Thanks again to the handy WAVE toolbar that exposes this so excellently and graphically. I think I'm getting addicted to it!
By JavaWoman, # 3. April 2008, 17:53:52