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