Using CSS Attribute Selectors
A Brief Introduction
In Our last tutorial, we discussed some CSS pseudo-classes and how we can use them to better traverse an HTML document to add styles to elements. Today, we’ll be taking the knowledge you’ve garnered and expanding it to new heights by introducing even more perplexing CSS pseudo-classes and selectors. You thought it was only :first-child, :last-child, and :nth-child()? There’s still much more to be seen young grasshopper. Let’s have a look.
Part 1: The HTML
We’ll be using the same unordered list from our last tutorial to begin, and later, we’ll add a few elements to the page to better see the effect of some of our styles. If you don’t have the index.html page from the previous tutorial, you can get it from the downloadable file (recommended) in this tutorial or copy and paste from the following code. Here’s what the initial HTML file should look like:
<title> Advanced CSS Selectors </title>
<link rel="Stylesheet" href="style.css" />
<li title="first-item"> Item 1</li>
<li class="shadow huge"> Item 2</li>
<li class="shadow huge"> Item 3</li>
<li> Item 4</li>
<li> Item 5</li>
<li> Item 6</li>
<li> Item 7</li>
<li> Item 8</li>
<li> Item 9</li>
<li> Item 10</li>
<li> Item 11</li>
<li> Item 12</li>
<li> Item 13</li>
<li> Item 14</li>
<li> Item 15</li>
We’ve chosen an unordered list due to it’s semantic nature. It is a parent (<ul>) which can contain plenty of children(<li>). This makes it an ideal candidate for topics like CSS pseudo-classes. Many of them are designed to target specific descendants of other elements as we saw in the previous tutorial. Let’s dive into the CSS.
Part 2: The CSS
The first advanced selector we’ll come in contact with today is called an Attribute Selector. This type of selector will be used to select an element based on a particular attribute the element has. You can use them to match every element that has a particular attribute, but there are also a few tricks up the attribute selector sleeve. There are 6 Different types of attribute selectors:
- [ att = value ] –> The attribute has to have the exact value specified
- [ att ~= value ] –> The attribute has to be a whitespace separated list of words (i.e., class=”round shadow red”), and one of the words is exactly.
- [ att |= value ] –> The attribute is exactly the word “value”, or starts with the word “value” and is immediately followed by a ” – “.
- [ att ^= value ] –> The attribute’s value starts with the specified value
- [ att $= value ] –> The attribute’s value ends with the specified value
- [ att *= value ] –> The attribute’s value contains the specified value
Recall that the asterisk( * ) is a symbol that represents all of the elements on the page. We’ve selected all of the elements that have a title attribute equal to first-item.
CSS allows us to have more than one class applied to an element, provided that each class you add is separated by a space. For instance, our second and third list items have a class of “shadow huge”. This is actually 2 classes; shadow and huge. Our second version of the attribute selector makes it a bit more simple to target elements with classes of this nature. Our next example will show how to select any list item with multiple classes where at least one of the classes matches the specified value. In our case, the value will be “shadow”. Have a look:
text-shadow: #999 2px 2px 2px;
Now, since our second and third list items each at least the “shadow” class, both will have the styles.
Moving right along, notice that the fourth and fifth items in our list have nearly the same class. The only difference is the last portion of the hyphen. The fourth item’s class is “item-cool”, and the fifth item’s class is “item-hot”. Our next selector is designed to target elements that have a class with a “dash” in it. As long as the value is exactly equal to the specified value or is exactly the specified value followed by a “dash”, the element will get the style. Let’s see how this looks in practice:
Now, even though our fourth and fifth items have slightly different classes, they can both share some similar styling with that simple selector. You should now be able to plug in the final 3 attribute selectors without too much trouble, as they are fairly straightforward.
A Few Last Words
This has been the second installment in our CSS selectors series of tutorials, but we’re not done yet. We’ve been through some fairly advanced pseudo-classes, and also some pretty high-level attribute selectors. The next step is to learn a bit more about structural pseudo-classes, the negation pseudo-class, and pseudo-elements. See you then, and be prepared!