CODEWITHSUNDEEP
jqueryhtmlcss
Dev 404
Dev 404

Reputation: 1616

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

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

Upvotes: 4

Views: 12312

Answers (1)

AndrewL64
AndrewL64

Reputation: 16341

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

Upvotes: 9

Related Questions