HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
It is possible to style HTML elements that have specific attributes or attribute values
It is possible to style HTML elements that have specific attributes or attribute values.
The [attribute] selector is used to select elements with a specified
attribute.
The following example selects all <a> elements with a target attribute:
a[target] {
background-color: yellow;
}
The [attribute="value"] selector is used to select elements with a specified
attribute and value.
The following example selects all <a> elements with a target="_blank" attribute:
a[target="_blank"] {
background-color: yellow;
}
The [attribute~="value"] selector is used to select elements with an attribute
value containing a specified word.
The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower":
[title~="flower"] {
border: 5px solid yellow;
}
The example above will match elements with title="flower", title="summer flower", and title="flower new", but not title="my-flower" or title="flowers".
The [attribute|="value"] selector
is used to select elements with the specified attribute, whose value can be
exactly the specified value, or the specified value followed by a hyphen (-).
[class|="top"] {
background: yellow;
}
The [attribute^="value"] selector
is used to select elements with the specified attribute, whose value starts with
the specified value.
The following example selects all elements with a class attribute value that starts with "top":
[class^="top"] {
background: yellow;
}
The [attribute$="value"] selector is used to select elements whose attribute
value ends with a specified value.
The following example selects all elements with a class attribute value that ends with "test":
[class$="test"] {
background: yellow;
}
The [attribute*="value"] selector is used to select elements whose attribute
value contains a specified value.
The following example selects all elements with a class attribute value that contains "te":
[class*="te"] {
background: yellow;
}
The attribute selectors can be useful for styling forms without class or ID:
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
}
Set the background color to "red" for <a> elements that have a target attribute.
<style>
{
background-color: red;
}
</style>
<body>
<a href="https://www.w3resource.net/">w3resource.net</a>
<a href="https://www.disney.com/" target="_blank">Disney.com</a>
<a href="https://www.wikipedia.org/" target="_top">wikipedia.org</a>
</body>
| Selector | Example | Example description |
|---|---|---|
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target="_blank" |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
| [attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| [attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3resource"] | Selects every <a> element whose href attribute value contains the substring "w3resource" |