Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

attribute

The attribute selector will target elements that have the specified attributes and values.
Syntax Logicelement[attribute="value"] { property_list }

CSS Code Example

e[att] - target elements that have the specified attribute: <style> p[lang]{ color: red; } </style> <p>Paragraph content ...</p> <p lang="en">Paragraph content ...</p> <p>Paragraph content ...</p> e[att="val"] - target elements that have the specified attribute and value: <style> button[type="reset"]{ background: darkred; color: white; } </style> <button type="button">Button 1</button> <button type="reset">Button 2</button> <button type="submit">Button 3</button> e[att~="val"] - target elements that have the specified attribute and the attribute value is a space separated list of values, one of which matches the specified value. <style> input[value~="the"] { background: pink; } </style> <input value="welcome to the show"> <input value="welcome to a show"> e[att^="val"] - target elements that have the specified attribute and its value begins with the specified value: <style> a[href^="http"] { color: magenta; } </style> <a href="http://www.youtube.com">Watch Videos</a> <br> <a href="contact.html">Contact Us</a> <br> <a href="http://www.yahoo.com">Search the web</a> e[att$="val"] - target elements that have the specified attribute and its value ends with the specified value: <style> a[href$="gov"] { color: red; } </style> <a href="www.usa.com">Link 1</a> <br> <a href="www.usa.gov">Link 2</a> <br> <a href="www.usa.org">Link 3</a> e[att*="val"] - target elements that have the specified attribute and its value contains the specified substring: <style> h2[title*="econ"] { color: orange; } </style> <h2 title="first heading">Heading 1</h2> <h2 title="second heading">Heading 2</h2> <h2 title="third heading">Heading 3</h2> e[att|="val"] - target elements that have the specified attribute and the attribute value is a hyphen separated list of values, one of which matches the specified value. <style> p[lang|="en"] { color: blue; } </style> <p lang="fr-CA">Paragraph content ...</p> <p lang="en-US">Paragraph content ...</p>

CSS

Selectors

universaltypecompoundclassidnotattributedescendantchildadjacent siblinggeneral siblingfirst childlast childonly childfirst of typelast of typeonly of typenth childnth last childnth of typenth last of typeemptyrootfirst linefirst letterbeforeafterlinkvisitedhoveractivefocustargetenableddisabledcheckedlang