Empeicher l'héritage

Jusqu'à présent, quand je veux appliquer un style à un élément sur lequel je ne peux pas ajouter d'id ou de class et que je veux éviter que ses enfants recoivent ce style, je fais un truc qui ressemble à ça

div {style:valeur;}
div div {style:none;}

<div>
  le style s'applique
  <div>
    le style ne s'applique pas à l'enfant
  </div>
</div>

Mais je ne trouve pas ça très propre. D'où ma question : existe-t-il une formulation que je n'ai pas réussi à trouver pour spécifier qu'un style ne s'hérite pas ?

Un truc qui ressemblerait à ça :

div {style:valeur inheritable;}

Bonjour,

fleuveblanc a écrit :
Mais je ne trouve pas ça très propre.

« Propre », ça ne veut rien dire en conception web. Une solution peut être difficile à mettre en place ou couteuse en ressources (chargement, exécution), ou bien peut rendre le code peu lisible et/ou rendre difficile l'évolution et la maintenance. Mais pas de solution « propre » ou « sale ».

fleuveblanc a écrit :
D'où ma question : existe-t-il une formulation que je n'ai pas réussi à trouver pour spécifier qu'un style ne s'hérite pas ?

Pas à ma connaissance.

Quels styles posent problème, concrètement ? En étant un minimum organisé, on n'a généralement pas de problème d'héritage.

Effectivement ce que tu demande n'est pas possible, sans aucun id ou classe au moins sur le premier div.

Une solution approchante serait d'utiliser les sélecteurs du type "div > div" qui permettent de n'appliquer des styles qu'aux enfants directs d'un élément. ...mais attention IE6 ne comprend pas cette notation

#conteneur > div{
...
}

<div id="conteneur">
  <div>
    le style s'applique
    <div>
      le style ne s'applique pas
    </div>
  </div>
</div>

Ah d'accord, il ne s'agit en fait pas d'héritage, mais tout simplement de sélecteurs CSS au champ d'application trop large.