web-dev-qa-db-fra.com

Comment définir une règle CSS pour deux balises?

Je voudrais savoir comment définir un paramètre pour deux classes différentes.

Pour donner un exemple:

.footer #one .flag li .drop_down form div{
    width: 80px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: left;
    line-height: 1.5;
    color: #ccc;
    font-weight:bolder;
    margin-left: 30px;
}
.footer #two .flag li .drop_down form div{
    width: 80px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: left;
    line-height: 1.5;
    color: #ccc;
    font-weight:bolder;
    margin-left: 30px;
}

Les deux règles ont le même contenu. La différence n'est que la deuxième balise. Y a-t-il un moyen de faire quelque chose comme ça?

.footer >>>#one and #two<<<< .flag li .drop_down form div{
        width: 80px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        text-align: left;
        line-height: 1.5;
        color: #ccc;
        font-weight:bolder;
        margin-left: 30px;
    }
htmlcsstags
29
bonny

Séparez les sélecteurs par une virgule:

.footer #one .flag li .drop_down form div,
.footer #two .flag li .drop_down form div {
    /* Rules */
}

De la sélecteurs niveau 3 spec :

Une liste de sélecteurs séparés par des virgules représente l'union de tous les éléments sélectionnés par chacun des sélecteurs individuels de la liste. (Une virgule est U + 002C.) Par exemple, en CSS lorsque plusieurs sélecteurs partagent les mêmes déclarations, ils peuvent être regroupés dans une liste séparée par des virgules. Un espace blanc peut apparaître avant et/ou après la virgule.

45
James Allardice

En CSS, vous utilisez un , (virgule), malheureusement, cela se trouve sur l'ensemble du sélecteur plutôt que sur une section de celui-ci.

Si vous voulez vraiment le rendre plus propre, vous pouvez donner à chacun des form div's un identifiant unique puis juste #form1, #form2.

Vous pouvez trouver plus d'informations dans " raccourcir les sélecteurs CSS séparés par des virgules ".

Par exemple:

.footer #one .flag li .drop_down form div,
.footer #two .flag li .drop_down form div {
    width: 80px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: left;
    line-height: 1.5;
    color: #ccc;
    font-weight:bolder;
    margin-left: 30px;
}
7
Pez Cuckow
.footer #one .flag li .drop_down form div, 
.footer #two .flag li .drop_down form div{
    ... 
}
4
MikeTedeschi

Séparez par une virgule:

.footer #one .flag li .drop_down form div,
.footer #two .flag li .drop_down form div
{
shared css
}

.footer #one .flag li .drop_down form div
{
indvi css for one
}

.footer #two .flag li .drop_down form div
{
indvi css for two
}
1
Liam

Utilisez une virgule au lieu de règles CSS distinctes:

.footer #one .flag li .drop_down form div,  
.footer #two .flag li .drop_down form div {  
    width: 80px;  
    font-family: Arial, Helvetica, sans-serif;  
    font-size: 11px;  
    text-align: left;  
    line-height: 1.5;  
    color: #ccc;  
    font-weight:bolder;  
    margin-left: 30px;  
}
1
Rakesh Vadnal