Est-il possible de référencer une règle CSS dans une autre?

Question

Par exemple, si j'ai le code HTML suivant:

 <div class="someDiv"></div>
 

et ce CSS:

 .opacity {
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6; 
}
.radius {
    border-top-left-radius: 15px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;    
}

.someDiv {
    background: #000; height: 50px; width: 200px;

/*** How can I reference the opacity and radius classes here
     so this div has those generic rules applied to it as well ***/

}
 

Comme dans les langages de script, vous utilisez des fonctions génériques souvent écrites en haut du script. Chaque fois que vous devez utiliser cette fonction, vous appelez simplement la fonction au lieu de répéter tout le code à chaque fois.

Answer 1

Non, vous ne pouvez pas faire référence à une règle à partir de l'autre.

Vous pouvez, cependant, la réutilisation des sélecteurs multiples règle-ensembles à l'intérieur d'une feuille de style et d' utiliser plusieurs sélecteurs sur un seul ensemble de règles (en les séparant par une virgule).

.opacity, .someDiv {
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6; 
}
.radius, .someDiv {
    border-top-left-radius: 15px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;    
}

Vous pouvez également appliquer plusieurs classes à un seul élément HTML (l'attribut de classe prend une liste séparée par des espaces).

<div class="opacity radius">

L'une de ces approches devrait résoudre votre problème.

Il serait probablement aider si vous avez utilisé des noms de classe qui décrit pourquoi un élément de style au lieu de la façon dont il devrait être de style. Laissez le comment dans la feuille de style.

Answer 2

Vous ne pouvez pas, sauf si vous utilisez une sorte de CSS étendu tel que SASS . Cependant, il est très raisonnable d'appliquer ces deux classes supplémentaires à .someDiv .

Si .someDiv est unique, je choisirais également de lui attribuer un identifiant et de le référencer dans css à l'aide de l'identifiant.

Answer 3

Ajoutez simplement les classes à votre HTML

 <div class="someDiv radius opacity"></div>