Como definir o estilo da função CSS

No seguinte HTML

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

o id pode ser acessado #contentem CSS. Como faço para acessar role="main".

Use seletores de atributo CSS:

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

por exemplo:

div[role=main]

Acessar assim deve funcionar: #content[role="main"]

Claro que você pode fazer neste modo:

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

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

A maneira mais curta de escrever um seletor que acesse esse div específico é simplesmente usar

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

As respostas anteriores não estão erradas, mas dependem de você usar um div ou o id específico. Com este seletor, você poderá ter todos os tipos de marcação maluca e ainda assim funcionaria e você evitará problemas com especificidade.

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

siga este tópico para mais informações

Seletor de atributo CSS: Aplicar classe se o atributo personalizado tiver valor? Além disso, funcionará no IE7 +?

e aprenda o seletor de atributos css

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

Por favor, use :

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

podemos usar

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