Regla CSS a aplicar solo si el elemento tiene AMBAS clases

Question

Regla CSS a aplicar solo si el elemento tiene AMBAS clases

Digamos que tenemos este marcado:

<div class="abc"> ... </div>
<div class="xyz"> ... </div>
<div class="abc xyz" style="width: 100px"> ... </div>

¿Hay una manera de seleccionar solo el <div> que tiene AMBAS clases abc y xyz (la última) y anular su ancho en línea para hacer que el ancho efectivo sea 200px?

Algo como esto:

[selector] {
  width: 200px !important;
}

209

css css-selectors

Author: Majid Fouladpour, 2011-04-27

Source

3 answers

A continuación se aplica a todas las etiquetas con las siguientes dos clases

.abc.xyz {  
  width: 200px !important;
}

Se aplica a las etiquetas div con las siguientes dos clases

div.abc.xyz {  
  width: 200px !important;
}

Si desea modificar esto usando jQuery

$(document).ready(function() {
  $("div.abc.xyz").width("200px");
});

8

Author: John Hartsock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-04-26 21:28:21

Si necesita una solución progmatica esto debería funcionar en jQuery:

$(".abc.xyz").css("width", 200);

3

Author: scrappedcola,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-17 07:07:39

score 322 · Accepted Answer

div.abc.xyz {
    /* rules go here */
}

... o simplemente:

.abc.xyz {
    /* rules go here */
}

322

Author: esqew,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-10 13:30:33