What's happening in this demo?
The Super Selectors jQuery plugin scans the page's styles for selectors which aren't supported by all browsers and then adds apropriate classes to elements that those CSS3 selectors are targeting.
For example…
The following rule is used to remove the left border on the first <li> in the <ul#nav> above:
#nav li:first {
border-left: 0 none transparent;
}
However, the :first-child selector is not supported by IE6. Super Selectors remedies this by adding class="first" to the first <li>. And another rule that IE6 will support is declared:
#nav li.first {
border-left: 0 none transparent;
}
Contextual icons…
CSS3 has the ability to select <a> elements with a particular file extension:
a[href$=".js"] {
background: url(icons/page_script.png) 0 50% no-repeat;
}
Some browsers …*cough* IE6 *cough*… do not have this ability. That's where Super Selectors steps in and add a class to each <a> that matches the rule. You can see this in action on the source file links below.
a.js {
background: url(icons/page_script.png) 0 50% no-repeat;
}
Whoa! Look at that :hovercraft…
Super Selectors even has support for the :hover pseudo-class! Check out the "Source Files" <table> below and the <ul> in the sidebar. Super Selectors adds and removes a class="hover" on the fly. This is particularly useful since IE6 doesn't support :hover classes on elements other than <a>
Source Files
| Name | Filesize | Created | Updated |
|---|---|---|---|
| jquery-super-selectors.js | 54kb | 2009-03-04 | 2009-01-07 |
| index.html | 1.5kb | 2009-03-04 | 2009-01-07 |
| demo.css | 2kb | 2009-03-04 | 2009-03-01 |
| linked.html | 25kb | 2009-03-02 | 2009-02-09 |
| link.css | 10kb | 2009-02-14 | 2009-02-09 |
| imported.html | 26kb | 2009-03-04 | 2009-02-09 |
| import.css | 10kb | 2009-02-14 | 2009-02-09 |
| embedded.html | 36kb | 2009-03-04 | 2009-02-09 |
| image-button.png | 327b | 2009-02-14 | 2009-02-14 |
File icons based on the excellent Silk icon set by Mark James.