Download & Extend

An implementation of advanced selectors in Zen

Project:Zen
Version:5.x-1.x-dev
Component:Code
Category:feature request
Priority:normal
Assigned:Unassigned
Status:closed (fixed)

Issue Summary

Advanced selectors offer the ability to add styling to elements with specific features. A common example is a link-icon next to a hyperlink to an external website to indicate that the user will leave the current site upon clicking that link.
Advanced selectors are supported in most modern browsers, albeit not the earlier versions since advanced selectors are defined in CSS2. Advanced selectors are for instance not supported in IE6-.

Example: http://www24.brinkster.com/ontario/greenfield/index.html
and the styling is provided in style.css:

a[href^="http:"], a[href^="https:"], a[href^="ftp:"] {
  background: url('../images/external.png') 100% 50% no-repeat;
  padding-right: 17px;
}
a[href$=".pdf"] {
  background: url('../images/acrobat.png') 100% 50% no-repeat;
  padding-right: 18px;
}
a[href$=".doc"] {
  background: url('../images/doc.png') 100% 50% no-repeat;
  padding-right: 18px;
}
a[href$=".xls"], a[href$=".csv"], a[href$=".ods"] {
  background: url('../images/graph.png') 100% 50% no-repeat;
  padding-right: 18px;
}
a[href$=".txt"] {
  background: url('../images/text.png') 100% 50% no-repeat;
  padding-right: 18px;
}

Request to add advanced selectors to Zen.

Comments

#1

Status:active» closed (fixed)

We will, of course use, whatever selectors are necessary to do the job. Including advanced selectors.

Since I don’t see an actual feature request, I’m closing this issue.

nobody click here