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

Obviously my jsfiddle is not working:

Or see the code below:

div.navbar {
  background-color: #CCF;
} {
  margin: 0;
div.text {
  background-color: #FFC;
  padding: 10px;
} div.navbar div.text {
  margin-top: 100px;
<div class="page">
  <div class="navbar">
    <ul class="box">
      <li class="active"><a href="#">Link 1</a>
  <div class="text">This the div that should go down due to the submenu ul</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

   background-color: #FFC;
   padding: 10px;

this will produce the effect shown in this fiddle.

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


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>
  <div id="specificDiv">This the div that should go down due to the submenu ul</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 put css max-left or min-left position to absolute object?

    How can I fix this CSS positioning for the transition to work? (CSS3 with Bootstrap)

    Some doubts about how make an image clickable using CSS

    How to increase checkboxes size with css which work in Google Chrome?

    How Float divs like twitter?

    CSS radio button border how to remove it?

    How do I animate this box to have a pop out effect?

    Show content on and off with Javascript

    How to add a 3rd level to my CSS drop down menu?

    CSS - how to code for a specific resolution

    How to make a responsive text inside a bootstrap button

    how to define multiple classes' hover event in css?

    How to make a horizontal list start in the center of the page?

    How to make a curved triangle speech bubble with pseudo-elements?

    How to override a style of a specific Joomla module?

    Third-Level Menu Items Are Always Showing

    How to recreate Mac like File Browser in all OS with JS/CSS

    How to cover piece of border with element over it?

    How to use min-width for “float:right” element in CSS?

    How to make pop up div locked to the page coordinates in jQuery

    How to align a picture,name and the post with css like facebook does?

    How to get the current year using css?

    how to make colors generated via Javascript be stored permanently in CSS file with or without use of PHP

    How to make a td element not wrap text inside a table?

    How to distinct classes in CSS using Javascript

    How to select all fields from a single box?

    How to make IFrame fill width of screen

    Django + Mac osx how to use less css?

    How to make Angular Forms ngModel classes inherit from Bootstrap Forms classes

    html5, how to style Figure differently for different case?