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>

div.page div.navbar ul.box li.active div.text - I don't think this is possible with pure CSS because div.text is neither a sibling or a descendant/child of li.active. — Harry
– Harry, Commented Jan 14, 2015 at 15:51
"I'd like to only apply a certain CSS if a class exists in the code elsewhere" -- Please be more specific. — Weafs.py
– Weafs.py, Commented Jan 14, 2015 at 15:52
Can you explain what you mean by "apply a certain CSS if a class exists in the code elsewhere", using the code in the question as an example — Rhumborl
– Rhumborl, Commented Jan 14, 2015 at 15:52
I updated my topic: As you can see in my code, what i try to do is apply a margin-top when li.active exists. — RobbertT
– RobbertT, Commented Jan 14, 2015 at 15:53
What you need is a javascript function which will cycle through your elements, searching for the specified class and apply the other class if something is found. — Andi
– Andi, Commented Jan 14, 2015 at 15:53

Master Yoda · Accepted Answer · 2015-01-14 16:09:56Z

3

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.

edited Jan 14, 2015 at 16:09

answered Jan 14, 2015 at 15:54

Master Yoda

4,42212 gold badges46 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

RobbertT Over a year ago

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 Over a year ago

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

Master Yoda Over a year ago

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 :)

Milind Anantwar · Accepted Answer · 2015-01-14 15:54:32Z

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

answered Jan 14, 2015 at 15:54

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Comments

Todd · Accepted Answer · 2015-01-14 16:22:22Z

2

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

cssonly

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

edited Jan 14, 2015 at 16:22

answered Jan 14, 2015 at 15:56

Todd

5,4843 gold badges33 silver badges47 bronze badges

2 Comments

RobbertT Over a year ago

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

Todd Over a year ago

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).

Lightness Races in Orbit · Accepted Answer · 2015-02-28 23:50:32Z

1

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");
   }
});

edited Feb 28, 2015 at 23:50

Lightness Races in Orbit

387k77 gold badges670 silver badges1.1k bronze badges

answered Jan 14, 2015 at 16:01

user254153

1,8935 gold badges44 silver badges88 bronze badges

2 Comments

RobbertT Over a year ago

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

user254153 Over a year ago

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

Andi · Accepted Answer · 2015-01-14 15:55:34Z

0

Something like this should do the trick:

$('.box li').each(function() {
    if($(this).hasClass('active')) {
        // add your margin-top here
    }
});

answered Jan 14, 2015 at 15:55

Andi

9391 gold badge11 silver badges26 bronze badges

1 Comment

RobbertT Over a year ago

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

Andrew Karnis · Accepted Answer · 2015-01-14 16:20:20Z

0

I agree with Milind Anantwar's answer using jQuery.

However I would be more specific with my if.

$('.active')

Will return any element with the class active

$('li.active')

Will return li elements with the class active

if ($('li.active').length) { ... }

answered Jan 14, 2015 at 16:20

Andrew Karnis

114 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

3 Comments

Comments

2 Comments

jquery

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

2 Comments

jquery

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related