CSS Attribute Selectors

Attribute Selectors

An attribute selector allows you to style an element based on the existence, value or partial value of a specific attribute.

Operator: none

Description: Using an attribute selector with no operator will select all the elements that contain that attribute. (CSS 2.1)

This example would look for all a tags that have the “rel” attribute defined, no matter what the value assigned to that attribute.

a[rel] { 
  color: red; 
  text-decoration: none; 
 }

[Example]

Operator: =

Description: Using the equals sign as an operator will allow the selector to match an element with the given value of an attribute.

In this case, all table cells with a width of 50 will have a grey background. (CSS 2.1)

 td[width="50"] { 
  background: #ccc; 
 }

[Example]

Operator: ~=

Description: If the equal sign is preceded by a tilde (~) then the selector will match if the value listed is any one of the space-separated values of the given attribute. Rmember that it is possible to have more than one value in a single class attribute. Like this:

<p class = "warning foo">

You could then have a “.warning” and “.foo” class that would be applied to this.

The following selector would apply if the class contained the word “warning”

 p[class~="warning"] { 
  color: red;  
 }

[Example]

Operator: |=

Description: If the equal sign is preceded by a pipe (|) then the selector will 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.

a[lang|="en"] { 
	text-decoration: none;
	background: #FF0000;
	color: #FFFFFF;
	border-bottom: 1px solid #0000FF;
 }

[Example]

Operator: ^=

Description: If the equal sign is preceded by a caret (^) then the selector will 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.

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

[Example]

Operator: $=

Description: If the equal sign is preceded by a dollar sign ($) then the selector will match the last characters of an attribute (such as a file extension).

The following CSS will grab any link that has an href attribute value that ends with “.pdf” and throw a grey background behind it and no underlining..

 a[href$=".pdf"] { 
  	background: #ccc;
	text-decoration: none;
 }

[Example]

Operator: *=

Description: If the equal sign is preceded by an asterisk (*) then the selector will match 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)

 a[title*="Home"] { 
  background: #ccc;
	text-decoration: none; 
 }

 

 

 

From HERE

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s