DEV Community

Chloe
Chloe

Posted on • Originally published at cgweb.co.uk on

1 1

Attribute Selectors

Just a quick post on attribute selectors in CSS.

What is an attribute selector?

Attributes are part of HTML markup giving elements further details e.g href on a tags using CSS you can target these attributes and their values. Attribute selectors are shown by square brackets [] e.g.

a[title]{ 
color: #000000;
}

a[href="https://"] { 
color: #CC0000;
}

div[lang|="en"] { 
font-style: italic;
}
Enter fullscreen mode Exit fullscreen mode

The first example will match a tags with a title attribute, the second will target any a tags with mailto links and the final will match any divs with the exact lang value of en _or_ en followed by a hyphen.

Substring matching selectors

-[att^="val"] = begins with
-[att$="val"] = ends with
-[att*="val"] = contains

a[href^="https://"]{ 
background: green; 
color: white;
}

a[href$=".pdf"] { 
background: yellow;
}

img[src*="thumb"] {
 border: 2px solid #CC0000;
}
Enter fullscreen mode Exit fullscreen mode

I've created some examples are on codepen shown below:

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay