Comment styliser le rôle CSS

Dans le HTML suivant

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

l'id est accessible via #contentCSS. Comment puis-je accéder role="main".

Utilisez les sélecteurs d'attributs CSS:

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

par exemple:

div[role=main]

Y accéder de cette manière devrait fonctionner: #content[role="main"]

Bien sûr, vous pouvez faire dans ce mode:

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

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

Le moyen le plus court d'écrire un sélecteur qui accède à ce div spécifique est simplement d'utiliser

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

Les réponses précédentes ne sont pas fausses, mais elles reposent sur vous en utilisant soit un div, soit un identifiant spécifique. Avec ce sélecteur, vous pourrez avoir toutes sortes de balises folles et cela fonctionnerait toujours et vous éviterez les problèmes de spécificité.

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

suivez ce fil pour plus d'informations

Sélecteur d'attributs CSS: appliquer la classe si l'attribut personnalisé a une valeur? En outre, cela fonctionnera-t-il dans IE7 +?

et apprenez le sélecteur d'attribut css

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

veuillez utiliser :

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

on peut utiliser

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