css css-selectors

CSS rule to apply only if element has BOTH classes [duplicate]


Let’s say we have this markup:

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

Is there a way to select only the <div> which has BOTH abc and xyz classes (the last one) AND override its inline width to make the effective width be 200px?

Something like this:

[selector] {
  width: 200px !important;


    517 {
        /* rules go here */

    … or simply: {
        /* rules go here */


    • 5

      Also: is more specific than .abc or .xyz or div so !important is not necessary.

      – Jan

      Apr 26, 2011 at 21:29

    • 3

      So, this will not select <div class="abc"> because it lacks xyz?

      Apr 26, 2011 at 21:30

    • 5

      Exactly so. You can see… for more info.

      – esqew

      Apr 26, 2011 at 21:32

    • 1

      @Jan. !important would be necessary if an inline style is in place. The inline style from OP’s question will override the CSS class.

      Apr 26, 2011 at 21:35

    • 4

      Note this differs from div .abc .xyz{} which applies to an object with class xyz with its parent having the abc class and the abc class having a div as a parent.

      – Jeff

      Sep 20, 2013 at 18:58


    Below applies to all tags with the following two classes {  
      width: 200px !important;

    applies to div tags with the following two classes {  
      width: 200px !important;

    If you wanted to modify this using jQuery

    $(document).ready(function() {



      If you need a progmatic solution this should work in jQuery:

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


      • Thank you, seems there was no problem other than my poor grasp over css!

        Apr 26, 2011 at 21:40

      • 1

        Jquery internally uses document.queryselector and document.queryselectorall in current releases. So, use those instead of jquery if that is all you would be using jquery for.

        – user7892745

        Apr 24, 2017 at 23:42