CSS Attribute Selectors

CSS Attribute Selectors

Online by JSC0d3
August 17, 2016 | | 924 recognitions

A CSS rule’s selector specifies which elements in your DOM the rule will apply to. The contextual type, class, and id selectors match an element’s tag type, class value, or id value respectively. A contextual selector is good for many cases, but it doesn’t provide you with the specificity you may sometimes desire.

<form novalidate>
<label for=name>Name</label>
<input id="name" type="text" required>
<br>
<br>
<label for=email>E-mail Address</label>
<input checked="" id="email" type="text" required>
<br>
<br>
<label for=zipCode>Zip Code</label>
<input checked="" id="zipCode" type="text">
</form>

In this example, let’s focus on the three text input elements. All of the text input elements are given a style as specified by the following rule that uses a straightforward contextual selector:

input {
  border: 2px solid #f1f1f1;
}

What I want to do is go one step further. I want to give two of the text input fields a different style based on whether the required attribute has been set on them or not.

Notice what makes the first two text input fields different from the third one. The first two text input fields have an attribute called required (highlighted above). The third text input field doesn’t.

If I wanted to style these two elements differently, I could create a new class and assign it to them. I could use JavaScript. Or…I could use an attribute selector that applies a rule when it detects the required attribute. Since this tutorial is all about attribute selectors, let’s use that approach.

Meet Attribute Selectors

Let’s start with the simple example I talked about earlier and work our way towards more complicated ones.

Matching if Attribute Exists

Our goal is to style all input elements that have the required attribute set on them.

The CSS rule will look as follows:

input[required] {
   border-color: #f3f3f3;
}

Notice how after the contextual tag selector input, you specify your required attribute surrounded by brackets. What this selector is saying is “find me all input elements that have an attribute called required specified.”

By using an attribute selector, you were able to use CSS to visually distinguish the elements with the required attribute from the input elements that do not have such an attribute declared.

Right now, you don’t care what the value of required actually is. As long as the required attribute exists in your input element, you want this CSS rule to apply.

Matching by Attribute Value

Checking if an attribute exists and applying a rule may not be enough. You may be in a situation where you want to apply a rule when the attribute not only exists, but it contains a particular value as well.

There are severao variations in how you can match by the attribute’s value, and in the following sections, let’s look at each of those variations.

Exact Match ( = )

This case is pretty straightforward. When you are doing an exact match, the attribute value you specify in your selector must match the attribute’s value on your HTML element. If your attribute’s value is misspelled or if it contains multiple values, this won’t work. You must have an exact match.

Take a look at the following example:

#contentMain #myList[contentEditable=false] {
background-color: #f2f2f2;
}
#contentMain #myList[contentEditable=true] {
background-color: #f4f4f4;
}

Notice that I have two CSS rules, and each rule has a selector specified for when the contentEditable attribute equals true or false.

The way you match exactly by value is to specify the attribute, an equals sign, and the attribue value that you want:

[highlight]stuff[attributeName=attributeValue][/highlight]

Because this is CSS, spacing doesn’t matter. Feel free to add a space between the equals sign and the attribute name and value if you prefer.

Matching Substring Anywhere in the Attribute Value ( *= )

If you want to match a substring of your attribute value regardless of where it appears, use the *= character between the attribute and the attribute value.

Let’s say you have some hyperlinks whose markup looks as follows:

<p><a href="#">HTML5 Tutorials</a></p>
<p><a href="#">Flash Tutorials</a></p>
<p><a href="#">Get Help</a></p>

What I want to do is is style any URLs that happen to have the ‘html5’ substring differently than the rest.

By using the following selector in my CSS rule, I can do just that:

a[href*="html5"] {
background-color: #f7f7f7;
color: #ccc;
}

Notice that I tell my selector to match if html5 appears anywhere inside the href attribute’s value.

The end result is that our first link, whose anchor tag points to a URL containing html5, is now styled differently than the rest:

If your attribute value contains multiple words, this approach is flexible enough to find the substring inside any of the words. Wohoo!

Matching Substring at Beginning or the End ( ^= or $= )

In the previous section, you saw how you can match a substring that occurs anywhere in your attribute value. If you want to constrain your search to just the beginning or the end of your attribute value, use the ^= or $= expression operators respectively.

Below is an example of the markup for this:

/* matches a file extension of .png */
a[href$=".png"] {
font-size: xx-large;
}
/* matches something that starts with http */
a[href^="http"] {
font-size: large;
}

If your attribute value is made up multiple words separated by a space, matching the substring at the beginning starts with the first word. Matching the substring towards the end works by looking at the last characters of the last word.

Matching Whole Value ( ~= )

If your attribute value is made up of several value separated by a space, you can specify an attribute selector that matches one of those values in its entirety. The following is an example of an element that has a multi-world value assigned to a custom data attribute called type:

<img src="data.png" data-type="some data type">

The value for the data-type attribute is some data type. If you wanted a selector that matched all img elements whose data-type attribute’s value contained the word battery, you can do that by using the ~= character:

img[data-type~="some"]{
border-color: #ccc;
}

You may think that having attributes with multiple words separated by a space is uncommon, and you are probably right. It isn’t too common – especially in a situation where you want to style the element with such an attribute value differently.

With the growing use of custom data- attributes, though, you may find yourself using custom attributes to give your elements an extra level of differentiation that you may not have had before. In those cases, you may have attribute values that are multiple words. If you wanted to style an element that matched one of those words, then you can always use the ~= operator.

So there you have it…attribute selectors. While you may not always need to use them, it is a handy tool to have in your HTML garage.

JSC0d3's Logo
About JSC0d3

JSC0d3 is an entrepreneur, online marketer, and an employee of an IT company. When not building websites, creating content, or helping customers improve their online business, spend time with their wife and two beautiful children. Although he still feels new in WordPress, he enjoys sharing what he has learned with all of you! If you want to get in touch with him, you can do this through this website.

On the same idea

Posted by | July 9, 2017

Grid systems are an incredibly powerful tool when creating any sort of website There are many grid systems out there, such as Bootstrap and Zurb...

Posted by | July 8, 2017

There are numerous advantages of WordPress SASS for WordPress developers You have most likely heard numerous contentions for utilizing a...

Posted by | July 7, 2017

Writing in SCSS lets you use features that don't exist in CSS yet like variables and nesting The biggest feature though, in my opinion, is mixins I'm...

Previous PostBackNext Post

Leave here an impression