Menu
Use the [attribute=”value”] selector to select elements with a specified attribute and value.
The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. Usage Example: <a href="#" role="button">Button Link</a> Screen Readers will read this element as “button” instead of “link”. There are four categories of roles: Abstract Roles.
The CSS id Selector The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.
Use CSS attribute selectors:
https://developer.mozilla.org/en-US/docs/CSS/Attribute_selectors
e.g.:
div[role=main]
Accessing it like this should work: #content[role="main"]
The shortest way to write a selector that accesses that specific div is to simply use
[role=main] {
/* CSS goes here */
}
The previous answers are not wrong, but they rely on you using either a div or using the specific id. With this selector, you'll be able to have all kinds of crazy markup and it would still work and you avoid problems with specificity.
[role=main] {
background: rgba(48, 96, 144, 0.2);
}
div,
span {
padding: 5px;
margin: 5px;
display: inline-block;
}<div id="content" role="main">
<span role="main">Hello</span>
</div>Sure you can do in this mode:
#content[role="main"]{
//style
}
http://www.w3.org/TR/selectors/#attribute-selectors
follow this thread for more information
CSS Attribute Selector: Apply class if custom attribute has value? Also, will it work in IE7+?
and learn css attribute selector
http://www.w3schools.com/css/css_attribute_selectors.asp
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With