The underlying superpower of CSS attribute selectors

#css #webdev #tutorial

All HTML elements can have attributes and these attributes can either add:

functionality - in the case of an <img src="picture.jpeg"> tag. The src attribute gives power to the tag, as without it the image will not be displayed on the web page.
modification - the alt in <img src="picture.jpeg" alt="this is a picture"> modifies the img tag by providing additional information to users with screen readers or in cases where the image is unable to display.

While some of these attributes have a direct function on the elements, some attributes like: id and class are almost unusable until targeted by CSS.

Adding and targeting the id and class is one of the most common ways developers target elements, but CSS has really amazing ways of selecting elements on a webpage, without having to add id or class directly in your HTML element or via your JavaScript. All you need to do is find what other attributes are in the element you are looking to select that can also be targeted with CSS.

Enough talk, let's take a dive into some of the CSS selectors lying about and waiting for you to use them:

[attribute] This allows you target the attribute in the square brackets everywhere it can be found on the page.

[href] {
 color:#0f0;
}

The code above looks for all the href attributes in the document and changes their color to green.
Other case scenarios include: [id], [class], [target].

element[attribute] This allows you target the specified attribute that can be found in the element tag before it.

img[alt] {
  display:none;
 }

The code above allows you to target all img tags with the alt attribute and this could be used to check for accessible images as all image tags should always have an alt attribute.
Hence <img src="myImage.png" alt=""> will not be displayed, while <img src="ourImage.png"> will show on the web page.
Other case scenarios are: input[type], input[placeholder e.t.c

element[attribute=value] This selector allows you to select only the attributes that have the exact value as the value in the square brackets.

p[id=about] {
 color:#f00;
}

The code above allows you to specifically target the <p></p> tag with the id of about.
You are wondering, why wouldn't you just use "#about" to target it in your CSS? Using the attribute selector helps you reduce the specificity of the id selector.

element[attribute|=value] This allows you target the attribute that has the specific value or that begins with the specific value followed by an hyphen.

button[class|="btn"] {
 color: #00f;
}

The code above looks for all <button></button> tags with a class that starts with "btn" or "btn-something". As such it will match <button class="btn"></button> and <button class="btn-primary"></button>. This will prove very useful for people who use the BEM naming convention.

element[attribute~="value"] : This allows you target value that is a full word from a space separated list of attributes.

[title~="name"] {
 color: #ff00ff;
}

The code above looks for all title attributes that has the value "name" among the words in its attribute.
Hence this will match <abbr title="my name abbreviation">MOE</abbr>.

element[attribute^="value"] : This attribute selector allows you to target any attribute whose value starts with the value enclosed within the attribute's value.

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

The code above looks for all <a> tags that leads to an external link. Hence this (<a href="https://www.google.com">Google</a>) will match while this (<a href="#about">Google</a>) won't.

element[attribute$="value"] : This allows you to target any attribute whose value ends with the value enclosed within the attribute's value.

img[src$=jpg] {
    display: block;
    height: auto;
    margin: 0 auto;
}

The code above targets all img tag whose src content ends with jpg.
Hence this code (<img src="inage.jpg" alt="">) will match while this (<img src="inage.jpeg" alt="">) won't.

element[attribute*="value"] : This allows you to target the attribute's value anywhere it is in the HTML document. It doesn't have to be a full or a standalone word, it only just needs to be present.

[class*="primary"]{
    color: cadetblue;
    background-color: black;
    border: none;
    padding: .4rem;
    width: 10vh;
    cursor: pointer;
}

The code above will match:
<button class="btn-primary" type="submit">submit</button>, it will also match <p class="primaryheader">another match</p>.

CSS attribute selectors can be very powerful when you know and apply them. But most importantly, they will help you achieve low specificity of elements which will in-turn make your life easier as a developer.

This is my first technical article and i hope you will find it useful. Do not hesitate to give feedback on possible improvements.
You can always refer to the sheet below when you need to use attribute selectors.