html - selectores - ¿Cómo establecer una regla de CSS para dos etiquetas?

selector de hijos css

Question

Me gustaría saber cómo puedo establecer una configuración para dos clases diferentes.

Para dar un ejemplo:

.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;
}

Ambas reglas tienen el mismo contenido. La diferencia es solo la segunda etiqueta. ¿Hay alguna manera de hacer algo como esto?

.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;
    }

Answer 1

Como otros chicos dicen, la respuesta a tu pregunta es:

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

Pero como se supone que una identificación es única en su página, su código podría simplificarse así:

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

Answer 2

En CSS utiliza una , (coma), desafortunadamente esto está en todo el selector en lugar de solo una sección de él.

Si realmente quisiera hacerlo más limpio, podría darle a cada uno de los form div''s un ID único y luego simplemente #form1, #form2 .

Puede encontrar más información en " Acortar los selectores de CSS separados por comas ".

Por ejemplo:

.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;
}

Answer 3

Separados con una coma:

.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
}

Answer 4

Separe los selectores con una coma:

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

Desde la especificación de nivel 3 de selectores :

Una lista de selectores separados por comas representa la unión de todos los elementos seleccionados por cada uno de los selectores individuales en la lista. (Una coma es U + 002C.) Por ejemplo, en CSS cuando varios selectores comparten las mismas declaraciones, se pueden agrupar en una lista separada por comas. El espacio en blanco puede aparecer antes y / o después de la coma.

Answer 5

Use una coma en lugar de reglas CSS separadas:

.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;  
}

Answer 6

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