Advanced Styling using CSS Attribute Selectors

Advanced Styling using CSS Attribute Selectors:

 

CSS is that friend we all love and hate. Another reason to love CSS is it enables you to select elements using their attributes.

The attributes often selected for styling are “class” and “id” attribute. In this article, I will show you how to target specific elements using other attributes and their specified values.

[attribute] Selector

The [attribute] Selector selects elements with a specified attribute.

Example

img[alt] {
  border: 2px solid yellow;
}

The selector above targets only images that contain the “alt” attribute so images with “alt” attribute would have a yellow border.

cute white dog // ✅ Selected, has yellow border
// ❌ not selected, no border

[attribute=“value”] Selector

The [attribute=“value”] selector selects elements that contain a specific attribute with an exact specified value.

Attribute value strings are by default case-sensitive, but can be changed to case-insensitive by adding ‘i’ before the closing bracket as shown below:

img[alt="paper"] { //Case sensitive
  border: 2px solid yellow;
}

img[alt="PapEr" i] {  //Case insensitive
  border: 2px solid yellow;
}

The selectors above target the same elements.

Example

paper // ✅ Selected, has yellow border

The selectors above target only images that contain the “alt” attributes whose value is “paper”.

[attribute*=“value”] Selector

The [attribute*=“value”] selector is used to select elements whose attribute value contains a specified value anywhere.

img[alt*="ter"] {
  border: 2px solid yellow;
}

Example

alter // ✅ Selected, has yellow border
termite // ✅ Selected, has yellow border
flattering // ✅ Selected, has yellow border

[attribute~=“value”] Selector

The [attribute~=“value”] selector is used to select elements whose attribute value contains a specified word.

img[alt~="coin"] {
  border: 2px solid yellow;
}

Example

coin collector // ✅ Selected, has yellow border
 Buycoins Headquaters // ❌ not selected, no border

[attribute^=“value”] Selector

The [attribute^=“value”] selector is used to select elements whose attribute value begins with a specified value.

img[alt^="hat"] {
  border: 2px solid yellow;
}

Example

hat // ✅ Selected, has yellow border
hatrick // ✅ Selected, has yellow border

[attribute|=“value”] Selector

The [attribute|=“value”] selector is used to select elements with the specified attribute starting with the specified value. In this case, the value has to be a whole word or the first word in a hyphen-separated word.

img[alt|="front"] {
  border: 2px solid yellow;
}

Example

front-end-developer // ✅ Selected, has yellow border
frontend-developer // ❌ not selected, no border
front // ✅ Selected, has yellow border

[attribute$=“value”] Selector

The [attribute$=“value”] selector is used to select elements whose attribute value ends with a specified value. The value does not have to be a whole word.

img[alt$="tion"] {
  border: 2px solid yellow;
}

Example

education // ✅ Selected, has yellow border
hand-lotion // ✅ Selected, has yellow border

from Tumblr https://generouspiratequeen.tumblr.com/post/639469630608588800

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s