How to apply CSS only if class exists elsewhere in code?

Question

So I'd like to only apply a certain CSS if a class exists in the code elsewhere. I was wondering if this is solely possible through css or if I need to use Jquery for this. Do anyone has any thoughts on this? If I need to use Jquery, can you give an example on how that might looks like?

As you can see in my code, what I try to do is apply a margin-top when li.active exists.

Obviously my jsfiddle is not working: http://jsfiddle.net/zt40oa7d/

Or see the code below:

div.navbar {
  background-color: #CCF;
}
ul.box {
  margin: 0;
}
div.text {
  background-color: #FFC;
  padding: 10px;
}
div.page div.navbar ul.box li.active div.text {
  margin-top: 100px;
}

<div class="page">
  <div class="navbar">
    <ul class="box">
      <li class="active"><a href="#">Link 1</a>
      </li>
    </ul>
  </div>
  <div class="text">This the div that should go down due to the submenu ul</div>
</div>

Solution 1

Yes its very possible to do this, its called the addClass() method in JQuery and it is used like this

$( "div" ).addClass( "text" );

Which in turns adds this CSS to your element

.text
{
   background-color: #FFC;
   padding: 10px;
}

this will produce the effect shown in this fiddle.

You can also remove it using $( "div" ).removeClass( "text" );

EDIT

You could also check if the active class exists using the hasClass() method in JQuery like this:

if( $("li").hasClass( "active" ) )
{
  $( "#specificDiv" ).addClass( "text" );
}

And your HTML with updates

<div class="page">
  <div class="navbar">
    <ul class="box">
      <li class="active"><a href="#">Link 1</a>
      </li>
    </ul>
  </div>
  <div id="specificDiv">This the div that should go down due to the submenu ul</div>
</div>

Here you are checking if the <li> has the class "active" assigned to it. If it does it will set the css "text" on the element which contains the id "specificID" but wont affect any other divs.

Have a look at what this does here

Read more on the JQuery addClass() method here.

Read more on the JQuery hasClass() method here.

Solution 2

Using jquery, you can find the length of li element with class .active on document ready, if yes then set the css to div with class .text:

$(function(){
if($('.active').length){
     $('div.text').css(' margin-top',' 100px');
}});

Working Demo

Solution 3

If you just want to apply rules to a certain div when a certain li > a has been clicked... You can do this CSS only

.text {
    display: none;
    background-color:#FFC;
    padding:10px;
}
.text:target {
    display:block;
}
#text1 {
    background: #bada55;
}
#text2 {
    background: #639;
}
#text3 {
    background: tomato;
}

html

<div class="page">
    <div class="navbar">
        <ul class="box">
            <li><a href="#text1">Test dropdown 1</a>
            </li>
            <li><a href="#text2">Test dropdown 2</a>
            </li>
            <li><a href="#text3">Test dropdown 3</a>
            </li>
        </ul>
    </div>
    <div id="text1" class="text">
        <h1>Foo</h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima aspernatur qui excepturi quas non tempore deserunt neque eos ducimus nobis tempora nam beatae aliquam necessitatibus aliquid accusantium vel libero cumque!
    </div>
    <div id="text2" class="text">
        <h1>Bar</h1>This the div that should go down due to the submenu ul
    </div>
    <div id="text3" class="text">
        <h1>Baz</h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus impedit quam cum. Sit quaerat architecto maiores veritatis labore minus dolorem earum sint sapiente est pariatur accusamus ducimus dolore sunt ipsa!
    </div>
</div>

Solution 4

You can do something like this. Check if ul tag children() which is li has '.active' class or not. If it does have then set the attr as active of the id '#textdiv' as bellow:

Write this (add id in your 'active' class):

<div id="textdiv" class="text">div text</div>

jquery

$(document).ready(function(){
   var a = $("ul.box").children('li').hasClass('active');

   if (a == true) {
     alert("asdf");
     $("#text").attr("class","text");
   }
});

View more solutions

Comments

[RobbertT]

Hi, thanks. Looks like something i need. however how does that look in fiddle? Cant seem to make it work for some reason. See: jsfiddle.net/xvy2tcv6

[RobbertT]

Thank you. However it does not seem to be working? see jsfiddle.net/rv10c39y i deleted the predefined class text.. and the jquery wont add any class... Any ideas?

[RobbertT]

Hi, Thank you! how do i make it add any class or margin? Can you maybe show me on a jsfiddle?

[RobbertT]

Thanks, can't really see how to apply your solution to my problem though.. Can you please further elaborate? Thank You!

[RobbertT]

Thanks for the edit. Did the trick for me! What is better though; use filter or add class?

[Master Yoda]

It really depends on how the rest of your application will work. If you think that you will have another class that might use similar logic then by all means carry on using the add class method but if not its best to filter out elements that you do not want inheriting this style. I hope that makes sense if not im more than happy to help further :)

[user254153]

See my edited answer. hasClass() return true is certain div has particular class.

[Todd]

so using this, you don't need to add the toggleClass(). this just applies styles to the active (href=#text1,2,3) dropdown's respective div (#text1,2,3).