CSS Selectors | CSS: Presentation Layer
Standards Based Development
Key Selector
Key Selector (last part of the selector) is the part that matches the element being matched, rather than its ancestor; a img, div > p, h1 + [title], img p and [title] are Key Selectors.
Descendant Selector
Avoid the descendant selector, it is the most expensive selector.
Substring Matching Attribute Selectors
Substring matching attribute selectors are provided for matching substrings in the value of an attribute; substring matching attribute selectors are for specifically targeting elements whose given attribute beings, ends, or contains a certain value. There are three substring matching attribute selectors:
Substring matching attribute selectors are widely supported in modern browsers (ie7+!!!!!!), so there's no reason to not be using them to provide more granularity to your css.
Substring matching attribute selectors values must be css identifiers, or css strings; case-sensitivity of attribute names in selectors depends on the document's language.
Begins With Selector [attr^="val"]
The begins with selector represents an element with the att attribute whose value beings with the prefix val. If val is an empty string then the selector does not represent anything.
The begins with selector uses the caret (^) character to match an element with an attribute value that begins with the value specified in the selector. The example below shows the begins with selector being used to target all secure links beginning in https. Only the secure links that begin with https are selected by the following styles:
a[href^="https"]{
color:#ff6347;
border-bottom:1px dotted}
In the next example, the selector represents an object, referencing an image:
object[type^="image/"]
Ends With Selector [attr$="val"]
The ends with selector represents an element with the att attribute whose value ends with the suffix val. If val is an empty string then the selector does not represent anything.
The ends with selector uses the dollar sign ($) character and matches element(s) with an attribute value that ends with the specified value. One case where the ends with selector is extremely helpful is adding icons to a link based on its file extension, defined in the href="" attribute's value. The example below uses the ends with selector to add a pdf icon to all links that are pdfs, because the user agent will match the href="" string ending with .pdf.
// html
<a href="yourmom.pdf" title="Your Mom (PDF)">Your Mom</a>
// css
a[href$=".pdf"]{
background:url("images/pdf.png") no-repeat 0 2px;
padding-left:25px}
In the next example, the selector represents an a that has an href="" attribute whose value ends with .html:
a[href$=".html"]
Contains Selector [attr*="val"]
The contains selector represents an element with the att attribute whose value contains at least one instance of the substring val. If val is an empty string then the selector does not represent anything.
The contains selector uses the asterisk (*) character to match element(s) with an attribute value that contains at least one instance of the specified value. In the example below, the contains selector is utilized to select all thumbnail images, which are located in a directory named thumbnails, and apply a border to them:
// html
<img src="images/thumbnails/yourmom.png"
alt="Your Mom (Thumbnail)" />
// css
img[src*="thumbnails"]{
border:5px solid #000;
}
In the next example, the selector represents p element(s) that have a title="" attribute whose value contains the substring hello:
p[title*="hello"]