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

David Walsh

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 did you know what the rel attribute can be used to select? 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 encountered in the real world.

[rel = external] - Exact match of attribute value

In the example above, we used the attribute with the value "friend" for the h2 element. The CSS selector that we wrote targets the h2 element because its rel attribute is set to “friend”. In other words, an equal sign means exact match. Let's consider other examples.

Attribute Equals

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

A more real life example is styling a list of blogs. For example, you have a list of links to friends' sites:

Jeff Starr
David Walsh
Richard Felix


You want to make different styles for each of the links. The traditional way is to assign a class name to each link, but this requires additional markup, which is not always good (for semantics and other things). Another way is to use: nth-child, but that will require an immutable 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. These are text, button, checkbox, file, hidden, image, password, radio, reset and submit. All of them are an element and they are all very different. So what to do, something like input {padding: 10px;}, almost always a bad idea. Therefore, very often you can 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 extra markup.

[rel * = external] - The 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 that change the value. For example, "* =" means finding the search value anywhere in the attribute value. Let's look at an example:

Attribute Contains

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

Remember that classes and IDs are also attributes, and can be used by an attribute selector. Let's say you write CSS for a site where you can’t control the markup and the developers made three divas:

You can select them all:

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

[rel ^ = external] - The attribute begins with a specific value

Attribute Begins

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

A real use case may be when you need to make any link to a friend’s site different from other links. It doesn’t matter if it is 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] - The attribute ends with a specific value

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

Attribute Ends

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

Honestly, I'm struggling to find a real-life example of using this. For example, you can find links with certain characters at the end.

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

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

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

Attribute Space Separated

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

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

[rel | = external] - The attribute contains the value in the split dash list

A list separated by dashes is very similar to a list separated by spaces, and it is also used to more strictly enforce the rules than when using * =.

Attribute Dash Separated

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

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

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

Multiple Attributes

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 the test page . If the string / selector is red, then the selector is working.