Attribute Selectors

This lesson takes a look at the very useful attribute selectors.

The CSS Layout Workshop: Attribute selectors

Some HTML elements have attributes. For example to create a link we use the a element with an href attribute, the value of the href is the link the browser will follow when clicked.

<a href="http://google.com">Google</a>

Form fields make heavy use of attributes. For example, the input element uses the type attribute to indicate whether the field is for text, an email address or even a checkbox.

<input type="text" name="fName" id="fName">
<input type="email" name="fEmail" id="fEmail">
<input type="checkbox" name="fTerms" id="fTerms" value="true">

Attribute selectors give us the ability to target an element based on the attributes it has.

When styling a text input, we generally would not want the same styles to apply to a checkbox. If we target input that will happen. We could add a class to the elements we want to style, however attribute selectors can help us precisely pick the elements we want to style and mean we can avoid adding a class just for this purpose.

The two elements below are a form element with input type of text, which will create a text input field, and checkbox creating a checkbox. As you can see they both use the input element.

<input type="text" name="fName" id="fName">
<input type="checkbox" name="fTerms" id="fTerms" value="true">

To select and style only the text input we use an attribute selector, adding the attribute and value inside the square brackets.

input[type="text"]

The above selector will only match if the attribute and value is exactly type=“text”. You can get far more complicated with attribute selectors.

Select an attribute name

In our example above our selector would match an attribute name of type with the exact value of text. If we just wanted to select every input element that had a type attribute, regardless of value we could use.

input[type]

Selecting from a list of values

Some attributes can take a list of values separated by a whitespace character. For example classes, in the following example we have the class box and also the class alert as the values of the class attribute.

<p class="box alert"></p>

To select any element with a class of box, even if it is in a list of classes we can match this with the following selector:

*[class~=box]

Selecting a value that starts with a string

You can select on values that start, end and contains a specific substring. To match all links that start with ‘https’ we would use the selector:

a[href^="https"]

To match http AND https links:

a[href^="http"]

To match only links to items on the same page:

a[href^="#"]

Selecting a value that ends with a string

You can also select a value if it ends with a certain string. This selector would only select links that end in .com.

a[href$=".com"]

Selecting a value that contains a string

The selector above selecting links that end in .com wouldn’t catch a link that went to another page of the site, or if a / was entered at the end of the domain. To catch all of these use a substring match.

a[href*=".com"]

This selector would match all of the following elements.

<a href="http://example.com"></a>
<a href="http://example.com/"></a>
<a href="http://example.com/page.html"></a>

Case insensitivity

By default all of the matches are case sensitive. If you need to make any match case insensitive use the i operator before the closing bracket.

This selector would match values starting with http or HTTP or Http for that matter!

a[href^="http" i]

Select a value or a value followed by a -

A use case for this is in selecting language subcodes. This selector would match en-US and en-GB.

span[lang|="en"]
Next lesson: Pseudo-class Selectors