Table of Contents
Attribute Selector 1: E[attr]
It is a basic type of CSS attribute selector, which selects all elements of E that have the given attribute attr. For example, a rule such as a[href] {background-color:yellow}
It would match all <a> tags that simply have the href attribute and apply its background color yellow.
Example:
CSS code: a[href] {background-color:yellow}
HTML code: <a href="www.siteforinfotech.com" target=_blank>Infotech Site</a>
Demo:
See the Pen oXVYQd by Shuseel Baral (@shuseel) on CodePen.
Attribute Selector 2: E[attr=value]
This type of selector selects all elements of E that have set the given attribute attr equal to the given value. For example the rule such as a{href="https://siteforinfotech.com"] {color:red;}
It would sets the font color to red on all a tags that have their href attribute set to https://siteforinfotech.com
Example:
CSS code: a{href="https://siteforinfotech.com"] {color:red;}
HTML code: <a href="www.siteforinfotech.com" target=_blank>Infotech Site</a> <a href="www.codepen.io" target=_blank>codepen</a>
Demo:
See the Pen mJoOQa by Shuseel Baral (@shuseel) on CodePen.
Attribute Selector 3: E[attr|=value]
This type of selector selects all elements of E that have an attribute that contains a value that starts with a value that starts with a value that is a list of hyphen-separated values. For example the rule such as p[lang|="en"] {color:red} /* It would make all english text in red*/
Example:
CSS code: p[lang|="en"] {color:red}
HTML code: <p lang="en">This is English and red</p> <p lang="en-uk">This is British English and red</p> <p>This is not red</p> <p lang="fr">Ceci est le français et pas rouge</p>
Demo:
See the Pen jPJVXb by Shuseel Baral (@shuseel) on CodePen.
Attribute Selector 4: E[attr~=value]
This selector selects all elements of E that have a space separated list of values for attr where one of those values is equal to the given value. It is possiple to match multiple attribute values or even pieces of attribute values. For example the rule such as p[title~="Test"] {font-style:italic;}
It would sets the font style to italic on all p tags that have one word in their title equal to test.
Example:
CSS code:p[title~="Test"] {font-style:italic;}
HTML code: <p title="My First Test">This is italic </p> <p title="Test">It is also italic</p> <p title="Second-Test">This is not italic</p>
Demo:
See the Pen XbGNoR by Shuseel Baral (@shuseel) on CodePen.
Attribute Selector 5: E[attr^=value]
This is a new selector defined in CSS3, it selects all elements of E that have the attribute attr that begins with the given value. For example the rule such as p[title^="html"] {color:blue;}
It would sets the color to blue if the title starts with html.
Example:
CSS code: p[title^="html"] {color:blue;}
HTML code: <p title="html lession">This paragraph is blue</p> <p title="This is html">This paragraph is not blue</p>
Demo:
See the Pen aOMBPL by Shuseel Baral (@shuseel) on CodePen.
Attribute Selector 6: E[attr$=value]
This selector is also defined in CSS3, it selects all elements of E that have the atttibute attr that ends with the given value. For example the rule such as P[title$="#"] {color:red;}
It would sets the color to red if the title ends with a hash.
Example:
CSS code: P[title$="#"] {color:red;}
HTML code: <p title="It ends with #">This title is red</p> <p title="This symbol # ends">This title is not red</p
Demo:
See the Pen qdvqLx by Shuseel Baral (@shuseel) on CodePen.
Attribute Selector 7: E[attr*=value]
This is another selector defined in CSS3, it selects all elements of E that contains the given value. For example the rule such as P[title*="css"] {background-color:red;}
It would sets the background color to red in any p tag that has CSS in its title.
Example:
CSS code: P[title*="css"] {color:red;}
HTML code: <p title="It is CSS">This title is red</p> <p title="CSS is the best">This title is also t red</p
Demo:
See the Pen vOPyvV by Shuseel Baral (@shuseel) on CodePen.
Using Multiple Attribute Selectors
You can select HTML elements by combining more than one attribute selectors or combining with basic selectors as given below. p.post[title] {background-color:red;}
It would select any <p> tag with the class “post” and with title attribute set.
#sidelinks a[href="http//"] {font-weight:bold;}
It would select any <a> tags which are descendents of some element with an id value of “sidelinks” that have href values that start with “http://” and make them bold.
You can also use multiple attribute characteristics at once as the following.
p[title="Test"] [lang|="en"] {border: 2px solid blue;}
It would select a <p> tag with title “Test” and a lang value in the English family and sets blue border having 2px solid.
Read Next:How to Select Particular Portion of an HTML Document Using CSS
