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

Question

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');

Answer 1

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

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

JSFiddle with above script

---

Or you can 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