advanced CSS selector query based on the body class name

Question

Can anyone suggest how I would go about creating a css rule that would vary depending on the body class? This is within a backbone js app used within a mobile app.

At the moment I will have either 'ks3' or 'ks4' for a class on the body tag (as shown below) and i'd like to have .menu class for ks3 & one for ks4

Current CSS :

.menu {
 background-image:url(../img/navigation/bg-768x1024.png);  // need to set to null if body class has ks4
 background-size: cover;
 color: #fff;
}

html

<body class="ks4">
  <div class="stk">
    <div class="shell"> 
      <div class="menu"> 
       <!-- my menu here-->
      </div>
    </div>
 </div>
</body>

So in essence I am trying to do the following in psuedocode..

if (body class is 'ks4') { use the existing .menu class but set background-image to none. }

Is this possible using advanced CSS selectors?

Answer 1

Since you set a rule for .menu it applies to all elements with menu class. Now all you need is to set a rule to override current rule for background image.

body.ks4 .menu{
    background-image:none !important;
}

advanced CSS selector query based on the body class name

Question

html

1 answers

solution1
1 ACCPTED 2015-07-29 10:26:02

advanced CSS selector query based on the body class name

Question

html

1 answers

solution1 1 ACCPTED 2015-07-29 10:26:02

solution1
1 ACCPTED 2015-07-29 10:26:02