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


Tags: jquery,css,if-statement

Problem :

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 :

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.


    CSS Howto..

    How to target separated class names through css?

    How do I center elements on a page using percentage widths?

    How to make section element in css to full width

    How to make element instantly go back to initial position after CSS animation end?

    How to give line-break from css, without using
    ?

    How to create border around jquery mobile webpage?

    How to use absolute element when its closet ancestor is a float element?

    How to wrap text in table cell at hyphen?

    How to turn off link effect on iPhone/iPod/iPad (CSS)?

    Extend page content in height or show white background under content

    How do I position images left and right in wordpress post

    How to make a header ribbon responsive

    How to make hyperlink for a background image?

    How to add styles to wordpress default menu

    how to make a span hold its position from an encroaching div

    Jquery how to add :hover to css style sheet

    How can I make images fit into a 200 pixel square box using CSS?

    How to overwrite styling in Twitter Bootstrap

    How to align text and images on one line and position those to the left and/or right?

    How to draw rotated element as backgorund in HTML

    How to select elements using CSS selector who's attribute can have multiple values

    Button element styled with CSS is not showing the background-image in IE6

    How to make div to match image height with CSS

    Hovering over item in WordPress list of pages shows Featured Image

    HTML5/CSS: how to implement a scroll bar

    Multiple css styles applied to one element, how to force one style over the other

    Use css to not show the text box

    How to change CSS style of div after onclick method

    How to make an image fully flexible in terms of display size?

    how to write IE 8 specific css styles