Cómo aplicar estilo al rol CSS

En el siguiente HTML

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

se puede acceder a la identificación a través #contentde CSS. ¿Cómo accedo role="main"?

Utilice selectores de atributos CSS:

https://developer.mozilla.org/en-US/docs/CSS/Attribute_selectors

p.ej:

div[role=main]

Acceder a él de esta manera debería funcionar: #content[role="main"]

Seguro que puedes hacerlo en este modo:

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

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

La forma más corta de escribir un selector que acceda a ese div específico es simplemente usar

[role=main] {
  /* CSS goes here */
}

Las respuestas anteriores no son incorrectas, pero dependen de que use un div o use la identificación específica. Con este selector, podrá tener todo tipo de marcado loco y aún funcionará y evitará problemas con la especificidad.

[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>

sigue este hilo para más información

Selector de atributos CSS: ¿Aplicar clase si el atributo personalizado tiene valor? Además, ¿funcionará en IE7 +?

y aprenda el selector de atributos CSS

http://www.w3schools.com/css/css_attribute_selectors.asp

por favor use :

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

nosotros podemos usar

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