CSS modifier un seul élément d'une classe sans utiliser un nom de classe différent

Question

Je me demandais s'il y a moyen de le faire.

Je ne souhaite modifier qu'une seule propriété d'une classe CSS spécifique, sans devoir la recopier et attribuer un nom de classe différent.

Donc, si j'ai cette classe

<div class="example">I am a red font with properties </div> 

Il est CSS

.example { 
font-size:2em; 
font-color:red; 
padding:2%; 
display:inline; 
//other several properties } 

Maintenant, je veux utiliser la classe exemple dans mon autre div, mais je veux juste la police à être vert . Je ne veux pas copier la même propriété et juste attribuer un nom de classe différente,

<div class="example2">I am a green font with properties </div> 

Encore une fois le Example2 sera le même que l'exemple, mais seulement la couleur de la police changerai

Il est CSS

.example2 { 
font-size:2em; 
font-color:green; 
padding:2%; 
display:inline; 
//other several properties same as example class 

Existe-t-il un moyen d'importer la propriété CSS sans avoir à la copier et à la renommer? Quelque chose comme

<div class="example" onlychange="font-color:green"> 
      I am a green font with properties </div> 

Des techniques pour réaliser quelque chose comme l'attribut onlychange?

Answer 1

Voici deux façons. La première est d'ajouter une autre classe et de modifier cette seule propriété, la propriété de seconde classe remplacera la propriété de classe précédente si elle est présente dans les deux.

La deuxième approche consistera simplement à l'écrire comme un style en ligne. Pas besoin de la classe supplémentaire!

.example { 
 
    font-size: 2em; 
 
    color: red; 
 
    padding: 2%; 
 
    display: inline; 
 
} 
 

 
.green { 
 
    color: green; 
 
}

<span class="example green">test</span> 
 

 
<span class="example" style="color:green;">test</span>

Answer 2

Si vous êtes sûr que le placement des éléments DIV restera même, alors, vous pouvez essayer la propriété nième enfant. par exemple. https://www.w3schools.com/cssref/sel_nth-child.asp

<div class="example2">I am a red font with properties </div> 
    <div class="example2">I am a green font with properties </div> 
    <div class="example2">I am a red font with properties </div> 

    Your style for that specific "example2" should be : 
    <style> 
    div.example2:nth-child(2){background-color:green;} 
    </style> 

L'exemple est avec 'couleur de fond', vous pouvez définir la propriété 'color' ainsi. `Font-color` n'est pas un vrai attribut CSS.