➢The [attribute] selector is used to select elements with a specified attribute.
EXAMPLE:
a[target] {
background-color: lightgreen;
}
➢The [attribute="value"] selector is used to select elements with a specified attribute and value.
EXAMPLE:
a[target="_blank"] {
background-color: lightgreen;
}
➢The [attribute~="value"] selector is used to select elements with an attribute value containing a specified word.
EXAMPLE:
[title~="flower"] {
border: 5px solid lightgreen;
}
➢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 (-).
EXAMPLE:
[class|="top"] {
background: lightgreen;
}
➢The [attribute^="value"] selector is used to select elements with the specified attribute, whose value starts with the specified value.
EXAMPLE:
[class^="top"] {
background: lightgreen;
}
➢The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value.
EXAMPLE:
[class$="test"] {
background: lightgreen;
}
➢The [attribute*="value"] selector is used to select elements whose attribute value contains a specified value.
EXAMPLE:
[class*="te"] {
background: lightgreen;
}
