Receive New Tutorials

A Guide to Using CSS Selectors

– {{showDate(postTime)}}

css attributes

This article was contributed to Codementor by Julie Myers

Sometimes you’d want to apply styles to your website selectively. CSS comes with a whole assortment of selectors to choose from. CSS selectors can be anywhere from class selectors to combinator selectors to the sizable assortment of pseudo class selectors. This article covers attribute selectors and substring matching attribute selectors. We will explain each selectors purpose, their browser compatibility, and show you coding examples so you can see how they work.

Attribute Selectors

[Compatible with modern browsers]

Attribute selectors allow us to target elements based on a given attribute or an attributes value. There are a variety of attribute selectors, as shown below. Let’s start with the most general of them all, just targeting an attribute no matter it’s value.

[attr] Selector

[IE 7+, Firefox 24+, Chrome 30+, Safari 6+]
The most basic attribute selector will target an element’s attribute no matter its value. For example:

<form class="form-contact">

 <label for="name">Name:</label>
 <input type="text" id="name">

 <label for="email">Email:</label>
 <input type="text" id="email">

 <input type="submit" value="Submit">
 <input type="reset" value="Reset">
</form>

input, textarea {
 display: block;
 margin-bottom: 2%;
}

input[type] {
 background-color: beige;
 font-size: 1.1em;
}

Before Applying CSS:

After Applying CSS:

As you can see, the input[type] selector targeted all input elements with a type attribute regardless of the type attributes value.

[attr=”value”] selector

[IE 7+, Firefox 24+, Chrome 30+, Safari 6+]
Selects an element with a certain attribute value.

<form class="form-contact">

 <label for="name">Name:</label>
 <input type="text" id="name">

 <label for="email">Email:</label>
 <input type="text" id="email">

 <input type="submit" value="Submit">
 <input type="reset" value="Reset">
</form>

input, textarea {
 display: block;
 margin-bottom: 2%;
}

input[type="text"] {
 background-color: beige;
 font-size: 1.1em;
}

input[type="submit"], input[type="reset"] {
 border: 3px solid green;
 display: inline-block;
 background-color: black;
 color: white;
}

Before Applying CSS:

After Applying CSS:

As you can see, the input[type="text"], input[type="submit"] and input[type="reset"] all
targeted input elements with the type attribute, but only applied its rules if the type attributes’ value matched.

Substring Matching Attribute Selectors

[Compatible with modern browsers]
With substring matching attribute selectors, we can target specific pieces of an attributes value like certain letters and words. And those pieces are called sub-strings.

^ tells the browser to match a string that’s at the beginning of an attributes value.
$ matches a string at the end of an attributes value.
* matches any part of an attributes value.
~ matches specific letters anywhere in the attributes value even if it has spaces.
| matches whole words at the beginning.

^ Begins With Selector

[IE 7+, Firefox 24+, Chrome 30+, Safari 6+]
The ^ selector will check the beginning of an attributes string value. For example:

<ul>
 <li><a href="http://google.com" target="_blank">Google.com</a></li>
 <li><a href="http://amazon.com" target="_blank">Amazon.com</a></li>
 <li><a href="/downloads/snoopy.jpg">Download JPG</a></li>
</ul>

a[href^="http://"] {
 color: orange;
 text-decoration: none;
}

/*
This will select any a elements that have an href attribute who's value
begins with "http://"
*/

Before Applying CSS:

After Applying CSS:

$ Ends With Selector

[IE 7+, Firefox 24+, Chrome 30+, Safari 6+]
The $ selector targets an element with an attribute value that ends with the substring you specify in the selector. For example:

<a href="//downloads/snoopy.pdf"><img src="images/pdfIcon.png"></a>

img {
 max-width: 100%;
 display: block;
}

a[href$=".pdf"] {
 border: 4px solid black;
 display: block;
 width: 50px;
}

/*
Notice how a[href$=".pdf"] selector targets a elements that have the href attribute who's
value ends with .pdf.
*/

Before Applying CSS:

After Applying CSS:

* Contains Selector

[IE 7+, Firefox 24+, Chrome 30+, Safari 6+]
The * substring matching attribute selector targets an element that has a specific attribute who’s value contains the sub-string anywhere in the attribute’s value. That sounds confusing, so let’s look at an example.

<a href="http://google.com">Google.com</>
<a href="http://maps.google.com">Google Maps</>
<a href="http://amazon.com">Amazon.com</>

a[href*="goo"] {
 border-bottom: 2px solid red;
 color: green;
 text-decoration: none;
 margin-right: 1%;
}

This selector matched any a element that has an href attribute who’s value contains the letters goo, in order, anywhere inside its href value. Notice how the Amazon link was left alone.

Before Applying CSS:

After Applying CSS:

[attr~=value] selector

[IE 7+, Firefox 24+, Chrome 30+, Safari 6+]
The ~ sub-string attribute matching selector lets you target specific letters when there is a space in the attribute’s value. When there is a space between words in an attributes value you will need to list the entire value when using the regular attribute selector. However, if you want just want to target specific characters anywhere in the value you use this selector. The following examples first shows you how the regular attribute selector works, then shows how to work around it.

<p class="title">In the Beginning...</p>
<p class="title colorMe">This is the End...</p>

Notice that the first p element has only one class. However, the second p elements has two classes. This is important to note as you will see. Also, they both have the title class.

Before Any CSS is Applied:

Selecting the title class using the regular attribute selector:

p[class="title"] {
 font-size: 1.5em;
 color: red;
}

Even though both p elements have the title class, only the first p element got the CSS applied to it. This is because the regular attribute selector has a limitation where either the entire attributes value is used or it won’t work at all.

Now, here is how to work around it:

p[class~="title"] {
 font-size: 1.5em;
 color: red;
}

Putting the ~ before the equals sign allows you to target the sub-string title, thus working around the regular attribute selectors limitation of having to either have the entire attribute value or it won’t work.

Selecting the ‘colorMe’ class:

p[class="colorMe"] {
 font-size: 1.5em;
 color: red;
}

The class colorMe is selected, but notice how the p[class="colorMe"] selector is NOT applied to the second p element. This is because of the regular attribute
selector’s limitation of having to either have the entire attribute value or it won’t work.

Here is how you work around it:

p[class~="colorMe"] {
font-size: 1.5em;
color: red;
}

Putting the ~ in front of the equals sign allows you to target the sub-string colorMe.

Another way I could have targeted the p element with the class attribute value of colorMe is as follows:

p[class="title colorMe"] {
 font-size: 1.5em;
 color: green;
}

Note: If I had done p[class="colorMe title"], the rule would not have applied.

[attr|=value]

[IE 7+, Firefox 24+, Chrome 30+, Safari 6+]
After learning how this selector works, I really didn’t see its added value since it does what some of the other selectors above do. Then I noticed it was implemented during CSS2 where the other sub-string selectors above where implemented during CSS3. So it is a throw back that you can use, but it does have one big limitation. Its big limitation is that the value has to be a whole word. Let’s see how it works.

<div lang="en" id="firstDiv">I am inside the first div element.</div>
<div lang="en-us" id="secondDiv">I am inside the second div element.</div>
<div lang="es" id="thirdDiv">I am inside the third div element.</div>

Before Any CSS is Applied:

Selecting [lang|=en]:
[lang|=en] {
 font-size: 1.5em;
 color: orangered;
}

Even though the second div has an attribute of lang=en-es, the rule still applied to it. Why? Because | selector works well with hyphens.

Let’s say I want to select all three divs, the following shows what does and does not work.

Selecting [lang|=e]:
[lang|=e] {
 font-size: 1.5em;
 color: orangered;
}

Here is the selector’s limitation showing itself. I just can’t select the letter e, which is what each lang attributes value starts with. Because with this selector, the entire word has to be used.

I could work around this issue by using the ^ begins with selector. Let see that:

Selecting [lang^=e]
[lang^=en] {
 font-size: 1.5em;
 color: orangered;
}

Another way I could have worked around it is by grouping selectors:

 [lang|=en], [lang|=es] {
   font-size: 1.5em;
   color: orangered;
 }

In all the examples above, I didn’t select an element first. Does it work that way?
Yes, it does. Let’s see an example:

Selecting an Element First:

div[lang|=es] {
 font-size: 1.5em;
 color: red;
}

As you can see, you can be more specific with this selector by targeting an element.

Thanks for reading! Have a great rest of your day.

About the Author

Julie Myers has been playing around with HTML and CSS since the Internet became popular. Since adding JavaScript to her knowledge base, Julie enjoys taking real life objects and seeing how she can mimic them in a browser. When not coding she enjoys woodworking, hiking, meditation, and spending time with her 5 cats and 1 husband.