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

Your selector looks right... is it possible that the content you are selecting doesn't exist in the DOM when you are trying to access it? — Wex
– Wex, Commented Sep 8, 2015 at 21:18
Your selector is correct. The problem is likely that your CSS styles are not working as you expect them to work. See jsfiddle.net/55tvdbbL — TylerH
– TylerH, Commented Sep 8, 2015 at 21:19
I'm glad to know I was at least doing the selector right. I'll take a deeper look to see if maybe they don't exist in the DOM at that time. I know the CSS that I am using works because I've used Inspect Element on that div to experiment with the styling before I actually implement it. — Dev 404
– Dev 404, Commented Sep 8, 2015 at 21:21

AndrewL64 · Accepted Answer · 2019-01-29 11:36:27Z

9

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

edited Jan 29, 2019 at 11:36

answered Sep 8, 2015 at 21:20

AndrewL64

16.4k8 gold badges51 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related