Tomorrow's CSS Today: 8 Techniques They Don't Want You To Know

Operator: |=

Description: Using the vertical line operator will allow the selector to match elements whose attribute values form a hyphenated list of words in which the specified value is present. This operator is primarily intended for the lang attribute. The following CSS will select a link element with a lang attribute value that contains en- and place an American flag after it. (CSS 2.1)

CSS:  
a[lang|="en"] {  
 padding: 0 20px 0 0;  
 background: #fff url(icon_lang-en.gif) no-repeat right center;  
}

HTML:  
<a href="http://www.example.com" lang="en-US">target link</a>

Operator: ^=

Description: Using the caret operator will allow the selector to match all elements that have an attribute that begins with the specified value. The following CSS will grab any link that has an href attribute value that starts with http, and place an icon after it. This example shows how useful this selector is for highlighting external or absolute links on your site. (CSS3)

CSS:  
a[href^="http"] {  
 padding: 0 20px 0 0;  
 background: #fff url(icon_external-site.gif) no-repeat right center;  
}

HTML:  
<a href="http://www.sitepoint.com">SitePoint</a>

Operator: $=

Description: Using the dollar sign operator is useful when you want to target the last characters of an attribute (such as a file extension... hint, hint!). This example will select any link to a .pdf file, and place a PDF icon after it. (CSS3)

CSS:  
a[href$=".pdf"] {  
 padding: 0 20px 0 0;  
 background: #fff url(icon_pdf.gif) no-repeat right center;  
}

HTML:  
<a href="file.pdf">target link</a>

Operator: *=

Description: Using the *= operator will allow the selector to target any element that has an attribute that contains the value at any point. The following CSS will apply the rule to any link with a title attribute that contains the pattern "home". (CSS3)

CSS:  
a[title*="Home"] {  
 padding: 0 0 0 20px;  
 background: #fff url(icon_home.gif) no-repeat left center;  
}

HTML:  
<a href="index.html" title="Home link">Home</a>

Child selector

Description: The child selector matches elements when the second element specified is a direct child of the first. In this example, all <strong> tags in a list item will be red, bold (the default behavior), and italic.

HTML:  
<li>This is the <strong>example</strong> text</li>

CSS:  
li > strong {  
 color: red;  
 font-style: italic;  
}

:first-child pseudo-class

Description: The first-child pseudo-class can be very helpful in highlighting the first paragraph of an article.

HTML:  
<p>Lorem ipsum dolor sit, consectetuer adipiscing.</p>  
<p>Vestibulum non nisl. Duis egestas urna et justo.</p>

CSS:  
p:first-child {  
 font-weight: 700;  
}

:first-line pseudo-element

Description: Use the first-line pseudo-element to apply CSS to the first line of text within the selected element. In an EM-unit or percentage-based layout, the number of bolded words will change as the page width changes. In this case, the first line of the paragraph will have a font-weight of 700 (bold).

HTML:  
<p>Lorem ipsum dolor sit, consectetuer adipiscing.</p>

CSS:  
p:first-line {  
 font-weight: 700;  
}