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;
}

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;
}

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