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 background css with php variable

    CSS sliding-window rounded-corner buttons: how to avoid the “dead” area on right side of “window”?

    How to adjust progress bar with Jquery?

    How to display inline with rails?

    How to make a “” looks like a link with CSS?

    How to change text-selection styles with javascript [duplicate]

    How to navigate divs in a custom built single page app? [closed]

    CSS: How to make a span link to expand?

    How to trigger a modal view with Highcharts, when zoom is also enabled?

    How to compile or convert sass / scss to css with node-sass (no Ruby)?

    How to center horizontally a div within an li in CSS

    How can i include only custom css and js files in rails application

    How to get CSS styling to shown on page? [closed]

    how to apply css property to my first div class only

    jQuery-Based Dropdown Shows Gap Outside of Firefox

    How to disable selection with specific class with js/css?

    How do you disable horizontal scrolling on a webpage?

    How to show/hide div on click with stricly HTML/CSS

    How to get rid of hidden space HTML/CSS [closed]

    JQuery show delete button on appended div

    CSS Key animation: How do I make an image expand and shrink properly?

    I made a webpage but have excess white space at the bottom, how do I get rid of this?

    How to apply properties to 3 types of input on HOVER?

    How use horizonal scorll div content div

    How to give a border as a background in css without using image and without adding anything to mark-up?

    How to align radio buttons with labels in one line? [duplicate]

    how can resize the page? [closed]

    How to center a text which is placed on an image

    How to rotate and fade background images in and out with javascript/ASP.NET/CSS

    How to center a span element in CSS? [closed]