How to add multiple CSS styles to an element with .css()


Tags: jquery,html,css

Problem :

I'm aware on how to add styles to nested elements using jQuery and JavaScript but for some reason I can't figure out how to add a style to a deeply nested element.

I'm using WordPress for my site and it has added a bunch of divs around the element that I am trying to reach.

I am trying to style the element with the class name .bx-wrapper. However, I only want to style the .bx-wrapper that is nested inside of the class .associate-wrapper.

Here is my current HTML:

<div class="row associate-wrapper">
  <li id="black-studio-tinymce-16" class="widget">
    <div class="textwidget">
      <div class="row"></div>
      <div class="col-md-12 text-center"></div>
      <div class="col-md-12 text-center">
        <div class="bx-wrapper">
          <p>content....</p>
        </div>
      </div>
    </div>
  </li>
</div>

And here is my current non-working jQuery:

$('.associate-wrapper').find('.bx-wrapper').css('position', 'absolute', 'margin-top', '30px');


Solution :

Since you are adding more than one property to your jQuery .css() tag, you will need to edit your .css() syntax like this:

$('.associate-wrapper').find('.bx-wrapper').css({'position': 'absolute', 'margin-top': '30px'});

JSFiddle with above script: http://jsfiddle.net/AndrewL32/65sf2f66/28/

Or as adjit posted, just change the selectors the same way CSS does and as mentioned above, since you are adding more than one property to your jQuery .css() tag, you will have to write your script like this:

$('.associate-wrapper .bx-wrapper').css({"position": "absolute", "margin-top": "30px"});

JSFiddle with above script: http://jsfiddle.net/AndrewL32/65sf2f66/29/


    CSS Howto..

    How to pause .setInterval() on hover and on .click() of interior content?

    How to force space inbetween a css table (responsive webpage)

    How to apply customized css to SSRS report

    How to know the correct css selector or group of selector for any html element quickly?

    How to set stylesheet programmatically in an ASP.NET MVC 2 project?

    Can't figure out how to make a box with multiple images with CSS/HTML

    How to center image which is bigger than screen?

    How to create different shape in css?

    How do I know which div was clicked?

    how to center image + text in an li Element

    Toggle radio button on javascript hide/show of div

    How to display sub sub menu to the left side using CSS?

    Showing a time countdown progress bar

    Box-shadow is overlapping other elements, how can I fix it?

    How Do I Modify My Linear Gradient Width to 100%?

    How do I eloquently toggle a show/hide event in a list of multiple collapsible items with jQuery?

    How to layer a
    element ontop of a other elements

    How can I prevent the seconds portion from displaying on the HTML5 time input element?

    How do I make a html page printable without reloading/refreshing the data?

    How to make my PHP code, display in html table?

    How to find out and get rid of unused CSS code? [closed]

    How to remove spacing between tags?

    How can I vertically align two floated divs?

    How to set inline css width using model values in c#, mvc

    How to change background color of readonly textbox in css

    How to apply SVG filter to an element?

    How to adjust the width of a DIV per height using CSS

    How do I get pictures side by side (responsive)

    How do I add keyboard bindings to carousel functionality? - jQuery

    How to add Print headers and footers in HTML, CSS and JavaScript?