Selector API - Attribute Selector

> (World Wide) Web - (W3|WWW) > Selector API

1 - About

A selector that filtered on an attribute.

3 - Syntax

  • An E element with a foo attribute
E[foo]
  • An E element whose foo attribute value is exactly equal to bar
E[foo="bar"]
  • All element whose foo attribute value is exactly equal to bar
*[foo="bar"]
  • an E element whose foo attribute value contains the substring bar
E[foo*="bar"]	
Advertising

4 - Button Example

  • The HTML
<a href="#" role="button" aria-label="Delete item 1">Delete</a>
  • The CSS
*[role="button"] {
  /* the attribute selector */
	background-color:#44c767;
	border-radius:28px;
	display:inline-block;
	color:#ffffff;
        padding:16px 31px;
}
*[role="button"]:hover {
	background-color:#5cbf2a;
}
*[role="button"]:active {
	position:relative;
	top:1px;
}
  • The result:

web/selector/attribute.txt ยท Last modified: 2019/03/10 22:03 by gerardnico