Class and selector matching in CSS/Javascript/JQuery

Question

I want to match a JQuery CSS call (modifying CSS so that I can use a variable) with some Javascript div/classes. I can't use "id" because there are many of these instances in a loop. Edit: it is still not quite working and I suspect I need a little more detail here.

The relevant piece of the CSS (there are other transform lines, not shown here):

.thermometer .circle {
    position: absolute;
    ...

.pie {
    position: absolute;
    ...
}

.hold {
    position: absolute;
    ...
    clip: rect(0px, 26px, 26px, 13px);
}

.pieSlice1 .pie {
    background-color: white;
    -webkit-transform:rotate(60deg);
    transform:rotate(60deg);
}

In a JST EJS file:

 <div class="thermometer">
   <div class="circle <%= this.presenter.newColor(nutrient) %>">
     <div class="pieSlice1 hold">
       <div class="pie"></div>
         <% $(".pieSlice1.hold .pie").css({'-webkit-transform': 'rot
ate(22deg)'}); %>

I've removed the space between "pieSlice1" and "hold", but do I need any of the other classes in order to match?

keune · Accepted Answer · 2013-01-04 13:48:40Z

2

It should be:

.pieSlice1.hold .pie

without any space between .pieSlice1 and .hold

answered Jan 4, 2013 at 13:48

keune

5,8054 gold badges39 silver badges53 bronze badges

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

3 Comments

sploiber Over a year ago

thanks, @keune. Please take a look if you get a chance- I added a bit more. I suspect it i s not quite right.

keune Over a year ago

the selector syntax and the css property you're trying to add is right. If it's not working, there should be some other problem.

sploiber Over a year ago

thanks. I am not sure how to find the other problem. I suspect I need to learn more about javascript debugging, to find out why the match isn't happening. Thanks for all your help.

Anujith · Accepted Answer · 2013-01-04 13:49:04Z

1

If you want an intersection, just write the selectors together without spaces in between.

$(".pieSlice1.hold .pie").css({'-webkit-transform': 'rot
ate(22deg)'});

When we include space, it looks for descendants...

Another option is:

$(".pieSlice1").filter(".hold .pie").css({'-webkit-transform': 'rot
ate(22deg)'});

answered Jan 4, 2013 at 13:49

Anujith

9,3686 gold badges36 silver badges48 bronze badges

2 Comments

sploiber Over a year ago

Please have a quick second look. I suspect I am still not fully there.

Anujith Over a year ago

That should work..,If it does not , try .thermometer .pieSlice1.hold .pie

daGUY · Accepted Answer · 2013-01-04 13:51:27Z

0

Since .pieSlice1 and .hold are both classes on the same element, you need to chain them:

.pieSlice1.hold .pie

Note how there's no space between .pieSlice1 and .hold – that means it will match an element with the class .pie which is a descendant of an element that has both .pieSlice1 and .hold classes.

Whereas with what you have now...

.pieSlice1 .hold .pie

That would match an element with the class .pie which is a descendant of an element with the class .hold, which itself is a descendant of an element with the class .pieSlice1.

answered Jan 4, 2013 at 13:51

daGUY

28.9k29 gold badges78 silver badges124 bronze badges

1 Comment

sploiber Over a year ago

#daGUY, thanks so much. Please take another look at the edit - I suspect I still don't have it quite right.

Collectives™ on Stack Overflow

Class and selector matching in CSS/Javascript/JQuery

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related