CSS Attribute Selector

CSS selectors allow web developers to apply styles to a particular element or set of elements on a web page.

When working with selectors, you may decide you want to target only elements with a particular attribute. That’s where the CSS attribute selector comes in. The attribute selector helps you apply certain styles only to elements with a specific attribute.

This tutorial will discuss how to use the CSS attribute selector when styling elements. By the end of reading this tutorial, you’ll be an expert at using the attribute selector to style elements.

HTML Attributes

In HTML, attributes are used to define additional characteristics or properties of an element. For instance, the height attribute sets the height of an image, and the title attribute sets the title of a web element.

You declare attributes using the name/value pair structure. This means that, in a HTML file, an attribute will appear like this: name=“value”. To learn more about attributes in HTML, read our guide to HTML attributes.

CSS Attribute Selector

When you’re designing a site, you may want to apply a style to elements based on whether those elements have a particular attribute value. You use the CSS attribute selector to do so.

The two steps you will take when using the attribute selector are:

1. Enclose an attribute’s name within square brackets. 
2. Specify the styles you want to apply to the attributes with that name.

Let’s explore a few examples of the CSS attribute selector in action.

CSS [Attribute]

The most basic form of the attribute selector is: [attribute]. Put simply, you enclose the name of an attribute in square brackets. 

Suppose we want to set the font size of every element with a title attribute to 16px. We can do so using this code:

[title] {
	font-size: 16px;
}

The code in our CSS rule will only apply to elements with a title attribute. The font size of any element with a title attribute specified—no matter what value that attribute stores—will change to 16px per the rule above.

You can make your attribute selector more precise by specifying one or both of the following:

• the particular element type to which a rule should apply
• its attribute ID value (such as “title” for text, “href” for a link, or “class” for any element).

For example, suppose you want to set the size of all paragraph header text to 16 px. You can do so using this code:

[title] {
	font-size: 16px;
}

The letter p at the start of the attribute selector tells the browser to apply the font style only to <p> tags. The [title] part of the selector instructs the browser to apply the font style only to <p> tags with a title attribute specified.

Therefore, after reading this code, the browser will convert the font size of all paragraph (p) headings to 16 px. This code will not affect any other text on the page.

CSS [attribute=“value”]

The [attribute=“value”] attribute selector enables coders to apply styles only to elements whose attribute values are equal to the value specified in the selector.

Suppose we want to set the background color of all links to the Career Karma homepage to orange. This style should set the background color of the a element to orange. We can perform this action using the following CSS code:

a[href="careerkarma.com"] {
	background-color: orange;
}

This rule selects all of your web page’s <a> elements whose href attribute is equal to careerkarma.com. Then, it sets the background color of all those elements to orange.

CSS [attribute~=“value”]

The [attribute~=“value”] selector allows you to select elements with attribute values that contain a specific word.

For instance, suppose you want to apply a style to all p elements with titles that match the word blue. For this style, the text color of these elements should be changed to blue.

We can use the following rule to accomplish this task:

p[title~="blue"] {
	color: blue;
}

This rule will find all <p> tags associated with titles containing the word “blue” and will set the text color of the text within those <p> tags to blue. So, if a <p> tag has the title blue color or color blue, this style will apply. However, this rule will not apply to a <p> tag with the title blueColor because the word blue is not independently present within the attribute.

This is different to the *= selector, which can not only find a specific word in an attribute, but can also find a specific value in an attribute.

CSS [attribute|=“value”]

The [attribute|=“value”] selector allows you to select elements with attributes that start with a specified value (for example, “top”). This includes elements with attributes that start with the specified value and contain a hyphen followed by additional text (for example, “top-style” and other “top-” values). Note that the code calls for a vertical bar (|) after the word “class.”

For instance, suppose you want to assign a 10px top padding to every <div> element with a class attribute that starts with top, including those that are followed by other hyphen-separated values. You can do so using this code:

div[class|="top"] {
	padding-top: 10px;
}

This rule will apply a 10px padding to the top of every <div> element whose class name starts with top, including elements with class names that start with top-. 

It’s important to note the value you specify must be either a whole word alone or a word followed by a hyphen. In other words, our above style would apply to <div> elements with the class names top style and top-style, but not to a <div> element with the class name topstyle.

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

CSS [attribute^=“value”]

The [attribute^=“value”] selector is used to select elements whose attribute value starts with a specific value. The value you specify does not have to be a whole word, unlike the [attribute|=“value”] selector we discussed earlier.

Suppose we want to apply a 10px bottom padding to every <div> element which has a class attribute starting with paddingBottom. We can do so using this code:

div[class^="paddingBottom"] {
	padding-bottom: 10px;
}

The user’s web browser will apply the padding-bottom style we defined to all <div> tags whose class names start with “paddingBottom”. So, if we have a class called “paddingBottomStyle”, this style will apply. This style will also apply to classes called “paddingBottom” and “paddingBottom-element”, for instance. But, it would not apply to a class called “new-paddingBottom”, which does not begin with “paddingBottom”.

CSS [attribute$=“value”]

The $= operator is used to select all elements whose attribute values end with a particular value. For instance, suppose you want to change the text color to gray of all hyperlinked text whose href attribute values end in .app. You can do so using this code:

a[href$=".app"] {
	color: gray;
}

This selector will apply to all <a> elements on your web page whose href values end in .app.

CSS [attribute*=“value”]

The *= operator allows you to select all elements whose attribute values contain a particular value. Unlike the ~= operator, this attribute selector can find a particular value in a class, not just a single word.

For instance, suppose you want to apply a 50px padding around all <div> tags whose class attributes contain allPadding. You can do so using this rule:

div[class*="allPadding"] {
	padding: 50px;
}

This rule will set a 50px padding around all HTML elements with class attributes that contain the term allPadding. So, elements with the class names new allPadding, surround allPadding red, allPaddingblue and allPadding-true will all be subject to this style.

Conclusion

The CSS attribute selector allows developers to select elements based on their attribute values and apply specific styles to those elements.

This tutorial discussed, with reference to examples, the basics of attribute selectors and how to use all types of the CSS attribute selector. Now you’re ready to start using the CSS attribute selector like a pro.

CSS is one of the three main skills used in web development. Download the free Career Karma app today to talk with an expert career coach who can help advise you on skills you need to break into a career as a web developer.