ATTRIBUTE SELECTOR IN CSS3

we are going to learn all about attribute selector with clear examples.!

There are many ways to select any emelent from HTML using css, like class selector, id selector, tag selector.

But today we will learn about attribute selector, its little bit complex to learn but it more powerfull.

Example of Class selector:

.test {
color: aliceblue;
}

It will select all elements, which hava test class.

and same like this we can use id selector.

Example of Id selector

#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.

Imagine we’ve been tasked with styling a page about cats in a very specific way. Here are the style requirements:

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.

for achiving all requirnment, we dont need to apply class on each element.

we can do it by telling our css how to target each element which will acomplish or requirnment.

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

[] braces used to target attribute.

2: Our second requirnment all elements with title “Persian cat” should be crossed out.

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

[attribute=“value”] this is syntext to target all elements with exact this text or value.

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

[attribute^=”value”] it will target all elements which have text on start.

4: Our forth requirnment all elements with text which ends on “at” should be italicized.

[title$="at"] {
    font-style: italic;
}

[attribute$=”value”] it will target all elements which have text on end.

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

6: Our sixth requirnment is all elements which contains “Siamese” word as seprate word Example: “Siamese test” should be underline.

[title~="Siamese"] {
    text-decoration: underline;

[attribute~=”value”] it will target all elements which have “value” sepratly.

7: Our last requirnment is all elements which, all the elements whose title has the prefix “Chantilly” should be marked with a red dotted border. “The string with a prefix” implies that the string equals either “prefix” or “prefix-[one or more words separated by a dash]”. So, we need to select elements like “Chantilly” or “Chantilly-[something-else]”

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

Attribute selectors may be combined with others. The selector for <img> with the alt attribute equal to "cat" looks like this:

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

There may also be multiple attribute selectors. For example, we can take all the images with alt="cat" and the src attribute starting with "nicecats":

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.

Scource Code Avail At this Link.

working code