CSS Attribute selectors are used to select specific attributes in HTML. For example,

<body>
     <h2 class="title">Welcome!</h2>
     <p class="foo" rel="newText">Some text here</p>
</body>

We have two class attributes and on rel attribute labeled, "newText". We could use the attribute selector like the following:

.title {font-size:2em;}
.foo {color:#ccc;}

p[rel=newText] { /*attribute selector*/
     font-size:1.15em;
     font-style:italic;
}

Using this rel attribute and stating what its value is, we can add styles to that exact element even though it has other inherited styles.

Breakdown

Attribute selectors can be somewhat strange at first. But fret not! They're quite easy to learn and can be useful in tricky situations.

[attrib=value]

This means the attribute will equals a certain value. For example:

<div id="form">
     <form action="process.php" method="post">
          <input class="button" type="button" name="button" 
value="Click Me" />
     </form>
</div>

Since this button already has a class attribute, it's already being styled independently. For the sake of argument, let us assume this button is used multiple times on a website and it would be a pain for us to add a new class value. We could simply use an attribute selector to style the button with the value of "Click Me!".

input.button {
     padding:3px;
     background:#3b3b3b url(images/button.png) repeat-x;
     width:50px;
     height:25px;
     color:#ccc;
}

input.button[value=Click Me] {
     background:#4c4c4c url(images/new-button.png) repeat-x;
     color:#999;
}

We have our class called "button" which is styled a certain way. Assuming it was a pain for us to create a new class, we can have the attribute selector get the exact value of "Click Me" and then style it differently.

[attrib*=value]

This one is a little bit more strange. The "*" in this situation kind of acts as a wildcard. This "*=" will search for the the following value anywhere in the attribute value. For example:

<h3 rel="foobarfoo">Text here</h3>

Using this attribute selector we could do the following:

h3[rel*=bar] {
     text-shadow:1px 1px 1px #000;
     color:#fff1d8;
}

This will search the attribute for the word bar and add the styles you want to it. We can also look at this from a different angle:

<div class="item1">Content here</div>
<div class="item_2">Content here</div>
<div class="item-3">Content here</div>

This would be considered poor coding on any level. But let us assume there was a situation like this and you wanted to create a style that would apply to all three of these class selectors. Instead of editing each one individually, we could do the following:

div[class*=post] {font-family:monospace;}

[attrib^=value]

This allows us to choose an attribute based on how it starts. If we have several attributes that start with the same string of text with multiple id and class styles added to the elements already, this can make our life easier.

<div class="foo bar" rel="hello-world">Content Here</div>
<div id="world" class="foo">
     <ul class="bar" rel="hello-world">
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li rel="hello-world">Item</li>
     <ul>

With a little CSS...

*[rel^=hello-world] {font-style:italic;}

Note: The * in this instance is a wildcard which will automatically put whatever element the attribute and value applies to.

Here is an alternative example:

<a href="http://www.atomicpages.net/blog/2010/05/04/css3-opacity/">CSS3 Opacity</a>
<a href="http://www.atomicpages.net/blog/2010/04/09/mmf2-beginning-video-tutorial-series/">MMF2 Tutorial Series</a>
<a href="http://www.w3.org/standards/xml/core">W3C XML Info</a>
<a href="http://www.whatwg.org/">WHATWG</a>
a[href^=http://www.aomicpages.net/] {color:#ff9300;}

[attrib$=value]

This will search for the value but at the end of the string.

<div class="foo bar">
<!--content here-->
</div>

<div class="bar"></div>
<div class="foo"></div>
div[class$=bar] {text-decoration:underline;}

[attrib~=value]

A typical HTML element that has multiple classes styling it would look like the following:

<div class="foo bar"></div>

Notice that the values are separated by a space. What if we had a different attribute that had multiple values that were separated by a space? Could we use *=? Probably, but the issue with *= is that it can be too picky since this does not require spaces. For example,

<div class="red" rel="foo bar"></div>
div.red {color:red;}
div[rel~=foo] {color:#470b0b;}

Using ~= would require the attribute to be separated by spaces if there were multiple values.

[attrib|=value]

This attribute selector allows us to styles attribute values separated by a dash. This is an alternative to using *=. See the following code:

<div class="blue" rel="bar-foo-bar"></div>
div.blue {background-color:blue;}
div[rel|=bar] {background-color:rgba(50, 50, 50, 0.6);}

Multiple Attribute Selectors

We can use multiple attribute selectors if we want. Consider the following code:

<div title="AtomicPages Blog" rel="example-link" class="blog img">&nbsp;</div>
div[title=AtomicPages Blog][rel|=link] {color:#ccc;}
Be Sociable, Share!