“Begins With” Attribute Selector

The first of these three attribute selectors lets you target an element in your CSS based on whether the attribute’s value begins with a given string. Here it is:

view plain?

1. a[href^="http://"] {  
2.     color: green;  
3. }  

This one uses the caret (^) character to tell the browser: “If this link has an href attribute that starts with http://, make it green.” Now, this specific example looks like an easy way to target external links.

But be careful, because if your CMS is adding your site’s URL to the beginning of certain links (like WordPress does), or if you’ve built your site with a “path” variable prepended to all links, then this would target all links that begin with “http://”, regardless of whether they are external or not. So this example might work only in specific circumstances.

To combat this, you might try:

view plain?

1. a[href^="http://"] {  
2.     color: green;  
3. }  
4.   
5. a[href^="http://www.domain.com"], a[href^="http://domain.com"] {  
6.     color: blue;  
7. }  

But even this is not perfect, because it doesn’t target “https”. So testing is crucial. Nonetheless, this clearly illustrates what this attribute selector does, so you can use it where you think it fits.

Another important note: Don’t confuse this one with what’s been commonly referred to as the“language” attribute selector, which uses the vertical pipe character (|). That attribute selector will only match the specified string if it is at the start of the value and if it precedes a hyphen. This one is commonly used for matching values in the hreflang attribute on links.

“Ends With” Attribute Selector

This next one is exactly the opposite: You can target an element based on the ending of an attribute value. Here it is:

view plain?

1. a[href$=".pdf"] {  
2.     background: url(../images/pdf.png) no-repeat center right;  
3.     padding-right: 20px;  
4. }  

This selector uses the dollar sign ($). Now we have what looks like a fairly reliable matching process. We know that all anchor elements that point to PDF documents are going to have the extension “.pdf”, so with this code we can add some right padding to those links and add a PDF icon to the link’s background.

“Contains” Attribute Selector

Finally, this selector targets elements based on any string match within an attribute value. So the specified string could occur anywhere in the value, not just at the beginning or the end.

view plain?

1. div[class*="post-"] p {  
2.     color: green;  
3. }  

The asterisk character (*) is well-known in computing as a wildcard character, so this one’s easy to remember.

The example I’m using may remind you of how WordPress sites attach a number of classes to specific elements, often with prefixes like “post-”. This might not be extremely practical, because usually there is another primary class with which to target the element. But again, it illustrates what can be done, and the type of values you’d be targeting with the wildcard character.