Semantic CSS With Intelligent Selectors

http://coding.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/

Attribute selectors

[rel="prev"] {
  /* styling for "previous links" */
}

[rel="next"] {
  /* styling for "next" links */
}

Attribute selectors with simple Regex

a[href^="https:"] {
   /* style properties exclusive to secure pages */
}


[href$=".zip"]:before,
[href$=".gz"]:before {
   content: '\E004'; /* unicode for the zip folder icon */
}

An example of efficient CSS selectors with semantic HTML

/* BAD - The CSS for the class approach */

.new-window-icon:after {
   content: '[new window icon]';
}

.twitter-icon:before {
  content: '[twitter icon]';
}


/* GOOD - The CSS for the attribute selector approach */

[target="_blank"]:after {
   content: '[new window icon]';
}

[href*="twitter.com/"]:before {
  content: '[twitter icon]';
}

Specific selector using attribute

a {
  color: blue;
  text-decoration: underline;
}

a[rel="external"]:after {
   content: '[icon for external links]';
}

Rules for hyperlinks and buttons

• Rule 1: “If it’s a hyperlink, it should have an href attribute.”
• Rules 2: “If it’s a hyperlink and has an href attribute, it should have a valid value.”
• Rules 3: “If it uses a button class, it should be a button — at least in the accessibility layer.”
• Rules 4: “If it is an a element with role="button", then it should link to somewhere when JavaScript is off.”
• Rules 5: “You can’t disable a hyperlink.”
• Rules 6: “Buttons in forms should have explicit types.”
• Rules 7:  “Both hyperlinks and buttons should have some sort of content or an ARIA label.”