CSS can link to HTML elements using any of its attributes. You probably know about classes and IDs. Check it in HTML:

< h2 id ="first-title" class ="magical" rel ="friend" > David Walsh </ h2 >

This one element has three attributes: ID, class and rel. To select an element in CSS, you can use the ID selector (# first-title) and the class selector (.magical). But do you know what can be used to select the rel attribute? This is the so-called attribute selector:

h2[rel=friend] {
/* woohoo! */
}

There are many attribute selectors, we will not consider all possible options, consider the most useful scenarios found in the real world.

[rel = external] - Exact match of attribute value

In the example above, we used the attribute with the friend value for the h2 element. The CSS selector we wrote targets the h2 element because its rel attribute is set to friend. In other words, an equal sign means an exact match. Consider other examples.

< h1 rel ="external" > Attribute Equals </ h1 >

h1[rel=external] { color: red; }

A more realistic life example is the styling of the blog list. For example, you have a list of links to friends sites:

< a href ="http://perishablepress.com" > Jeff Starr </ a >
< a href ="http://davidwalsh.name" > David Walsh </ a >
< a href ="http://accidentalninja.net/" > Richard Felix </ a >


You want to make different styles for each of the links. The traditional way is to give each link the name of the class, but this requires additional markup, which is not always good (for semantics and so on). Another way is to use: nth-child, but this will require a fixed list order. In this case, the ideal solution would be to use attribute selectors ... Links already have unique attributes.

a[href=http://perishablepress.com] { color: red; }

I think that most often attribute selectors are used for input elements. This is text, button, checkbox, file, hidden, image, password, radio, reset and submit. All of them are <input/> element and they are all very different. So doing something like input {padding: 10px;} is almost always a bad idea. Therefore, it is very often possible to see something similar to this:

input[type=text] { padding: 3px; }
input[type=radio] { float: left; }

This is the only way to get different types of inputs without adding additional markup.

[rel * = external] - Attribute contains some value anywhere

This is where it becomes more interesting. The equal sign in the attribute selector may be preceded by other characters changing the value. For example, "* =" means finding the desired value anywhere in the attribute value. Let's look at an example:

< h1 rel ="xxxexternalxxx" > Attribute Contains </ h1 >

h1[rel*=external] { color: red; }

Remember that classes and IDs are also attributes, and can be used with an attribute selector. Suppose you write CSS for a site in which you cannot control the markup and the developers have made three divas:

< div id ="post_1" ></ div >
< div id ="post_two" ></ div >
< div id ="third_post" ></ div >

You can select them all:

div[id*=post] { color: red; }

')

[rel ^ = external] - Attribute starts with a specific value.

< h1 rel ="external-link yep" > Attribute Begins </ h1 >

h1[rel^=external] { color: red; }

A real use case could be a case where you need to make any link to a friend’s site different from other links. It doesn’t matter if it’s a link to the main page or internal, the style should be one.

a[href^=http://perishablepress.com] { color: red; }

This will correspond to the link to the main and secondary pages.

[rel $ = external] - Attribute ending with a specific value.

We can choose based on the initial value of the attribute, why not choose from the final one?

< h1 rel ="friend external" > Attribute Ends </ h1 >

h1[rel$=external] { color: red; }

Honestly, I struggle to find a real example of using this. For example, you can find links that have certain characters at the end.

a[href$=#], a[href$=?] { color: red; }

[rel ~ = external] - The attribute contains a value in the list separated by spaces.

You probably know that several classes can be applied to an element. If you do, you can use the .class-name in CSS to link. In the attribute selector is not so simple. If your attribute has several values ​​(for example, a space separated list) you will have to use "~ =".

< h1 rel ="friend external sandwich" > Attribute Space Separated </ h1 >

h1[rel~=external] { color: red; }

You might think, why use this when "* =" finds the same and is more flexible? Indeed, more universal, but may be too universal. This selector requires space around the value when * = none. So if you have two elements, one with the rel="home friend-link" attribute, the other rel="home friend link" . You will need a space-separated selector to communicate with the second element.

[rel | = external] - Attribute contains the value in the list of divided dashes

The dash-delimited list is very similar to the space-delimited list, and is also used to more strictly enforce the rules than when using * =.

< h1 rel ="friend-external-sandwich" > Attribute Dash Separated </ h1 >

h1[rel|=external] { color: red; }

[title = one] [rel ^ = external] - Match multiple attributes

You can use several attribute selectors in one selector, which require matching of all conditions.

< h1 rel ="handsome" title ="Important note" > Multiple Attributes </ h1 >

h1[rel=handsome][title^=Important] { color: red; }

Browser Support

Each example above works in all modern browsers: Safari, Chrome, Firefox, Opera, and IE. Internet Explorer has excellent support for all of this in version 7 and zero support in version 6. To test in a browser - open a test page . If the line / selector is red, then the selector works.