Selector API - Attribute Selector (AND operation)

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"]	

  • an E element whose:
    • foo attribute value is exactly equal to foo
    • and bar attribute value is exactly equal to bar

E[foo=foo][bar=bar]

  • All foo attribute with a property that contains bar

[foo*='shadow'] 

4 - Example

4.1 - And (intersection)

4.1.1 - Attribute (Id and class)


#IdName.className  { color:blue; }
/* shorthand for */
*[id=IdName][class=className] { color:blue; }

  • The HTML

<div id="IdName" class="className">The CSS style will be applied on this text</div>
<div>Not on this one</div>

  • The result:

4.1.2 - Element and class

  • An element selector and a class selector (ie selects element “div” with the class “className”). The point . is a shorthand notation for a class selector

div.className  { color:blue; }
/* equivalent to */
div[class~=className]  { color:blue; }

  • The HTML

<div class="className">The CSS style will be applied on this text because it's a div element with the class className</div>
<div>Not on this one because it has no class</div>

  • The result:

4.1.3 - Starts with an attribute value

Example:

  • all class that starts with foo

[class^="foo"]

4.2 - Button

  • 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:


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap