CSS - Attribute Selectors

Jun 18, 2026 3:00pm UTC (Check your timezone)

Theory Workshop Review Quiz Certification project

Instructors: Jess, Carmen, and Eda

Attribute Selectors

Before this session, please:

Review notes
Review notes
Review notes
We’ll cover core steps and topics from Build a Balance Sheet to review them together
Review notes
We’ll talk through Build a Book Inventory App together to explore different ways you could approach this certification project

HTML elements can be selected based on their attributes. Attribute selectors are especially useful to target elements dynamically.

For example, targeting link elements with the title attribute looks like this:

1a[title] {
2  font-weight: bold;
3}

Multiple attributes can also be given. For example, this is targeting link elements that have title and href attributes:

1a[href][title] {
2  display: block;
3  color: green;
4}

We can also match an element that has a value with multiple attributes, for example, multiple class names, with the [attr~=value] syntax:

1<a href="https://example.com" class="btn primary large">Visit Example Site</a>

1a[class~="primary"] {
2  color: red;
3  font-weight: bold;
4}

To target elements where the attribute value is prefixed by specific value, we can use the [attr^=value] syntax.

1a[href^="https://"] {
2  color: green;
3  text-decoration: underline;
4}

To target elements where the attribute value ends with a specific value, we can use the [attr$=value] syntax.

1a[href$=".com"] {
2  color: darkgreen;
3  text-decoration: underline dotted;
4}

To style elements based on the language, the lang and data-lang attributes can be used.

1<p lang="en">This is not a pipe.</p>
2<p lang="fr">Ceci n'est pas une pipe.</p>

1p[lang="en"] {
2  font-style: italic;
3}

With data-lang:

1<p data-lang="fr">Ceci est un paragraphe en français.</p>
2<p data-lang="en">This is a paragraph in English.</p>

1p[data-lang="fr"] {
2  color: blue;
3}

Ordered list elements can different numbering format based on the type attribute. For example:

1<ol type="A">
2  <li>Item 1</li>
3  <li>Item 2</li>
4</ol>

The possible values are:

We can target the list elements based on this attribute as well:

1ol[type="A"] {
2  color: purple;
3  font-weight: bold;
4}

We’ll go through this workshop that includes some of the HTML and CSS concepts that we’ve learned so far!

In this unit, we’ve explored:

Working with different attribute selectors and links
Targeting elements with the lang and data-lang attributes
Working with the attribute selector, ordered list elements and the type attribute

We’ll take a look at this exercise that lets you practice some HTML table and CSS concepts we’ve explored so far!