ATTRIBUTE SELECTOR IN CSS3

.test {
color: aliceblue;
}

It will select all elements, which hava test class.

#test {
color: aliceblue;
}

Attribute selectors

Say we want to apply a style to all the elements that have a certain attribute or one with a specific value. In this case, we can use attribute selectors.

  1. All elements with the title attribute should have aliceblue (it’s a CSS color name) background;
  2. All elements with the title “Persian cat” should be crossed out;
  3. All elements whose title starts with the letter “S” should be bold;
  4. All elements whose title ends in “at” should be italicized;
  5. All elements whose title contains “sia” should have a blue dotted border;
  6. All elements whose title contains “Siamese” as a separate word should be underlined with a solid line;
  7. All elements whose title has the prefix “Chantilly” should have a red dotted border.

~Selecting by attribute or value of attribute

1: Our first requirnment is all element with title attributes should have backgroundColor “aliceblue”.

[title] {
background-color: aliceblue;
}
[title="Persion cat"] {
text-decoration: line-through;
}

~Selected by biggener or End of value

3: Our thired requirnment all elements with text which starts letter “S” should be bold.

[title^="S"] {
font-weight: bold;
}
[title$="at"] {
font-style: italic;
}

~Selecting by other parts of value

5: Our fifth requirnmen all elements with text all the elements whose title contains “sia” should get a blue dotted border. To select all the elements with some attribute whose value contains string, use [attribute*="string"]:

[title*="sia"] {
border: 5px dotted blue;
}
[title~="Siamese"] {
text-decoration: underline;

Note: [attribute~=”value”] is used to select seprate value, and [attribute|=”value”] is used to select word with ‘-’ sepration.

[title|="Chantilly"] {
border: 4px dotted red;
}

Other notes about attribute selectors

Note that although Siamese cat and Traditional Siamese cat have the letter combination “sia” inside, the fifth requirement does not apply to them because attribute selectors are case sensitive by default. If you want these selectors to be case insensitive, add the letter i in the brackets:

[title*="sia" i] {
border: 4px dotted blue;
}
img[alt="cat"] {
...
}

Note: we can use attribute selector for spacific tag elemets, suppose there are two elements with title attribute, <img title=””/> <a title=””/> so can tell css which element we want to target. see example blow.

img[title$="at"] {
// it will target all image elements with title attribute which // text ends with at.
}
img[alt="cat"][src^="nicecats"] {
// it will just select image attribute which alt="cat" and sec // starts with "nicecats"
}

~Conclusion

Now you are able to select elements by their attributes and their values using attribute selectors. There was a lot of new information: you might find it useful to write out the attribute selectors’ symbols until you remember them well.

working code

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Toseef Ahmad

Toseef Ahmad

Hy, i'm ReactJS Front End Developer And CYBER SECURITY Export. i love Computer Science!