CSS Attribute Selectors

CSS Attribute Selectors

Attribute selectors select an element using the presence of a given attribute or attribute value.

An attribute selector will match elements on the basis of either the presence of an attribute, or the exact or partial match of an attribute value.

Style HTML Elements With Specific Attributes

It is possible to style HTML elements that have specific attributes or attribute values.

[attr]

  Represents an element with an attribute name of attr.

[attr=value]

  Represents an element with an attribute name of attr and whose value is exactly "value".

[attr~=value]

  Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly "value".

[attr|=value]

  Represents an element with an attribute name of attr. Its value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D). It can be used for language subcode matches.

[attr^=value]

  Represents an element with an attribute name of attr and whose first value is prefixed by "value".

[attr$=value]

  Represents an element with an attribute name of attr and whose last value is suffixed by "value".

[attr*=value]

  Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.

1) CSS [attribute] Selector

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
a[target] {
    background-color: yellow;
}
</style>
</head>
<body>
<p>The links with a target attribute gets a yellow background:</p>
<a href="https://www.tipsntracks.com">tipsntrack.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
Try it with the Editor

2) CSS [attribute="value"] Selector

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank] {
    background-color: yellow;
}
</style>
</head>
<body>
<p>The link with target="_blank" gets a yellow background:</p>
<a href="https://www.tipsntracks.com">tipsntrack.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
Try it with the Editor

3) CSS [attribute~="value"] Selector

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
[title~=flower] {
    border: 5px solid white;
}
</style>
</head>
<body>
<p>All images with the title attribute containing the word "flower" get a yellow border.</p>
<img src="klematis.jpg" title="klematis flower" width="150" height="113">
<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_tree.gif" title="tree" width="200" height="358">
</body>
</html>
Try it with the Editor

4) CSS [attribute|="value"] Selector

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
[class|=top] {
    background: yellow;
}
</style>
</head>
<body>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
</body>
</html>
Try it with the Editor

5) CSS [attribute^="value"] Selector

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
[class^=”top”] {
    background: yellow;
}
</style>
</head>
<body>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
</body>
</html>
Try it with the Editor

6) CSS [attribute$="value"] Selector

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
[class$="test"] {
    background: yellow;
}
</style>
</head>
<body>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>
Try it with the Editor

7) CSS [attribute*="value"] Selector

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
    background: yellow;
}
</style>
</head>
<body>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>
Try it with the Editor