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.”
