CSS Attribute Selector

Attribute Selector means the property, character or behavior of the Selector.

Suppose, you want to select an element with a particular attribute, then we can use Attribute Selector. so, this is one of the ways to select a particular element with a particular type of attribute.

There are multiple ways to use CSS Attribute Selectors. Let us discuss all of this one by one-

Note/Info:
CSS attribute selectors are Case Sensitive.

CSS [attribute] selector Examples

Let us select a particular element with a particular attribute(without any value)

Syntax:
[attribute-name] {
properties:values;
};

Example:
a[title] {
	color: #ff0000;
}

This will select <a> tag with ‘title’ attribute and sets the font color as red(i.e. #ff0000).

Example:
a[target] {
	color: green;
        background-color:pink;
}

This will select <a> tag with ‘target’ attribute and sets the font color as green & background color as pink.

CSS [attribute] selector

<style>
a[title] {
  color:red;
}

a[target] {
 text-decoration:underline;
}    
</style>

2. Let us select a particular element with a particular attribute with a particular fixed value.

Syntax:
[attribute-name=”value“] {
properties:values;
};

Example:
a[href="http://www.tutorialbrain.com"] {
	color: yellow;
}

This will select ‘a’ tag with the href attribute having the value of hyperlink as “http://www.tutorialbrain.com” & will set the text color to yellow.

Example:
div[lang="fr"] {
  background-color: blue;
}

This will select the div which has a language attribute in “French” & will set the background color as blue.

CSS [attribute-name="value"] Selector

<style>
a[href="http://www.tutorialbrain.com"] {
	color: green;
}

div[lang="en-gb"] {
  background-color: pink;
  padding:5px;
}
</style>

3. Let us select a particular element with a particular attribute which matches a particular value exactly or matches a value which is a hyphen(-) separated.

Note/Info The value must be a complete word or word immediately followed by a hyphen (-).
Example:
Suppose, we have an 4 ids with values as "iddiv", "idco_nt","iddiv-cl" and "id-div" respectively, then it will only select the ids "iddiv" & "id-div".

Syntax:
[attribute-name|=”value“] {
properties:values;
};

Example:
[id|=idDiv] {
  background-color: yellow;
  border: 2px solid green;
}

You can also special elements like class, id etc.

In this case, it will select all the id which starts with “idDiv” & will set the background color and border.

Example:
p[lang|=en] {
	background: orange;
}

This will select the paragraph which starts with language “en” like lang=”en-us”, lang=”en-au” etc & will set the background color of all those paragraphs to orange.

CSS [attribute-name|="value"] Selector

<style>
[id|="idDiv"] {
  background-color: yellow;
}

p[lang|="en"] {
  color: indianred;
}
</style>

4. Let us select a particular element with a particular attribute which has either a fixed value or values separated by white spaces.

Syntax:
[attribute-name~=”value“] {
properties:values;
};

Example:
class[lang~="en-us"] {
  color: blue;
}

Suppose, we have 3 classes with different lang attributes like –

lang=”en-us”
lang=”en-us en-gb”
lang=”en-gb”

then, it will select the class which has lang=”en-us” and lang=”en-us en-gb” because the 1st and 2nd lang attribute has either a fixed word or a word separated by white space which matches with “en-us”.

Example:
image[title~="border"] {
  margin: 3px;
  padding: 2px;
  border:1px solid green;
}

This will select all the images which have the title as “border” or it has a title which is separated by the word “border”.

Example:

a) title=”border” will be selected
b) title=”padding border” will be selected.
c) title=”border-image” will not be selected as the full word is not border or there is no white space between border and image.

CSS [attribute-name~="value"] Selector

<style>
[class~="class1"] {
  background-color: orange;
  border:4px groove tomato;
}
</style>

5. Let us select a particular element with a particular attribute which begins with a particular value.

Syntax:
[attribute-name^=”value“] {
properties:values;
};

Example:
a[href^="https://"] {
  color: pink;
  text-decoration:underline;
}

Let us assume that we have some HTML document which contains some hyperlinks.

If you want to select all the href which are secured i.e. which starts with “https://”, then we can use this example.

Here, we are not validating the selected links, rather just styling these with color as pink and underlining them.

CSS [attribute-name^="value"] Selector

<style>
a[href^="https://"] {
  color:red;
  text-decoration:none;
}

a[href^="http://"] {
  background-color:yellow;
  text-decoration:underline;
}

a[href^="www."] {
  color:blue;
  background-color:aqua;
}
</style>

6. Let us select a particular element with a particular attribute which ends with a particular value.

Syntax:
[attribute-name$=”value“] {
properties:values;
};

Example:
a[href$=".com"] {
  text-decoration: none;
}

This will select all the hyperlinks(hrefs) which end with “.com” & will remove the underline from those links.

Example:
div[id$="auto"] {
  width: 400px;
  height:auto;
  background:yellow;
  
}

This will select all the div with ids which end with “auto” & will set the width, height and background color.

Example:
img[src$=".jpg"] {
  border: 3px ridge blue;
}

This will select all the images which ends with ‘.jpg’.
Example:
image1.jpg
image2.jpg

The below div id ends with "auto"

Image ends with ".jpg" and href ends with "google.com"

CSS [attribute-name$="value"] Selector

<style>
a[href$="google.com"] {
  background-color:purple;
  color:#fff;
}

div[id$="auto"] {
  max-width: 500px;
  height:auto;
  background:yellow;
  
}

img[src$=".jpg"] {
  border: 5px ridge blue;
  width: 50%;
  height: 30%;  
}
</style>

7. Let us select a particular element with a particular attribute which contains a particular value within it.

Syntax:
[attribute-name*=”value”] {
properties:values;
};

Example:
a[href*="tutorial"] {
  color: orange;
}

This will select all the hyperlinks(hrefs) which contains the word tutorial & will style it with orange color.

Example:

tutorialbrain.com will be selected.
exampletutorial.com will be selected.
tutorial.org will be selected.
google.com will not be selected.

Example:
div[class*="main"] {
  border:2px solid yellow;
  
}

This will select all the div with a class whose name contains the word “main” in them.

Follow @tutorial_brain

CSS Attribute Selector for class name or Id

We can also apply the attribute selector for class names or id’s as well so you can combine any of the above attribute properties with class names or ids.

Example:
.main[attribute="value"] {
  font-weight:bold;
}

This will select the class name “main” as class name are selected using a dot(.) under the head section within the style sheet.

Example:
#trans[attribute$="value"] {
  padding:5px;
  margin:2px;
}

This will select the id with the name as”trans” as id are selected using a hash(#) under the head section within the style sheet.