[css] How to style CSS role

In the following HTML

<div id="content" role="main">

the id can be accessed through #content in CSS. How do I access 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] {_x000D_
  background: rgba(48, 96, 144, 0.2);_x000D_
}_x000D_
div,_x000D_
span {_x000D_
  padding: 5px;_x000D_
  margin: 5px;_x000D_
  display: inline-block;_x000D_
}

<div id="content" role="main">_x000D_
  <span role="main">Hello</span>_x000D_
</div>

we can use

 element[role="ourRole"] {
    requried style !important; /*for overriding the old css styles */
    }

Sure you can do in this mode:

 #content[role="main"]{
       //style
    }

http://www.w3.org/TR/selectors/#attribute-selectors

please use :

 #content[role=main]{
   your style here
}

Accessing it like this should work: #content[role="main"]

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