Fandom

HTML & CSS Wiki

CSS Attribute Selectors

649pages on
this wiki
Add New Page
Comments0 Share

In an HTML document, CSS Attribute Selectors select an element using the presence of a given attribute or attribute value.

There are different types of attribute selectors which are listed below.

Selector CSS Description
[attr] 2 Represents an element with an attribute name of attr.
[attr=value] 2 Represents an element with an attribute name of attr and whose value is exactly value.
[attr~=value] 2 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] 2 Represents an element with an attribute name of attr whose value is a hyphen-separated list of words, one of which is exactly value. It can be used for language subcode matches.
[attr^=value] 3 Represents an element with an attribute name of attr and whose value is prefixed by value.
[attr$=value] 3 Represents an element with an attribute name of attr and whose value is suffixed by value.
[attr*=value] 3 Represents an element with an attribute name of attr and whose value contains at least one occurrence of string value as a substring.
[attr="value" i] 4 Represents an element with an attribute name of attr and whose value is case-sensitive.


Example:

<html>
   <head>
      <title>Title</title>
      <style type="text/css">
         span[id=span] {
                      color:red;
         }

         [id=span] {
              color:blue; /* Regular id attribute which works with any element */
         }
      </style>
    </head>
    <body>
       <span id="span">Red text.</span>
       <span>Default text.</span>
       <div id="span">Blue text.</div>
    </body>
</html>

See Also

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.