Accessing a div with a complex class name

Question

In the code below, I've marked a <div> with "LINE BELOW". I need to set css background attribute but, no matter how I try the syntax in jQuery or JavaScript, it seems like it never recognizes the thing! Why won't it accept my CSS definition?

As a bonus explain to me how to override the existing background attribute that contains !important in it.

This is the approximate scheme of what I have in a target website:

<div id="main-content">
    <div id="detailblock">
        <div class="tabsblock">
            <section class="editblock">
                <form id="target">
                    <div class="editblock-item">
                        <div class="input textarea">
                            <div class="editor_box">
                                //LINE BELOW:
                                <div class="editor_ editor_text">
                                    //Something inside of div...
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </section>
        </div>
    </div>
</div>

I tried this and found during research and it didn't work:

jQuery(".editor_.editor_text").css("background","#000 none repeat scroll 0% 0%");

What am I doing wrong?

UPDATE

I just tested and colored all divs in blue using css(). They all worked, except that particular one. But if I remove all divs using remove(), it will get removed with all divs. But if I remove that particular div using it's selector, it will not get removed!

Please show your jQuery/JavaScript code that seems to fail. It will help if we can reproduce the exact issue you are experiencing. — showdev, Jun 08 '15 at 18:55
`jQuery(".editor_.editor_text").css("background","#000 none repeat scroll 0% 0%");` is what I tried first and found during research and it didn't work. — BotistSab, Jun 08 '15 at 18:58
It [seems to work for me](http://jsfiddle.net/2fws4k7s/). Can you show us an example in which it fails? — showdev, Jun 08 '15 at 19:02
@showdev Unfortunately not, because on the target website it's only available for a signed up user. Also, I checked that if you add that attribute in style="" or in CSS properties in F12, it will work, but it's not a solution, of course. — BotistSab, Jun 08 '15 at 19:09
I read your question again and it sounds like you might have an `!important` CSS definition somewhere that your jQuery method cannot overcome. Is that the case? — showdev, Jun 08 '15 at 19:30
possible duplicate of [How to apply !important using .css()?](http://stackoverflow.com/questions/2655925/how-to-apply-important-using-css) — showdev, Jun 08 '15 at 19:34
Hey people, thank you for your help. Update here: I just tested and colored all divs in blue using css(). They all worked, except that particular one. But if I remove all divs using remove(), it will get removed with all divs. But if I remove that particular div using it's selector, it will not get removed! — BotistSab, Jun 08 '15 at 20:30

Dan O · Answer 1 · 2015-06-08T19:43:24.980

1

you're not really selecting a <div> with a complex class name; you're trying to select a <div> with two class names assigned to it. Your jQuery selector does not have to contain both of those class names; either will do, though of course you can specify both if you want. Does $("div.editor_") select the element you want to change? Does $("div.editor_text")?

Once you have figured out the proper selector, you can either call jQuery's .css method on the selected element:

$(...).css("background", "blue");

or you can edit the selected element's style property directly (as in, not through jQuery). If you are attempting to override a CSS !important directive, I believe this is the method you must use:

$(...)[0].style.setProperty("background", "blue", "important");

(this works because two CSS rules are now marked as equally !important, and the order of application dictates that the one you're setting will win out.)

edited Jun 08 '15 at 19:43

answered Jun 08 '15 at 18:58

Dan O

6,022
2
32
50

No, these didn't work as well (forgot to specify them), with both and without "div" in the beginning. – BotistSab Jun 08 '15 at 19:03
1

I'm pretty sure the selector works, though I suppose it could depend on what version of jQuery you're using. `$("div.editor_")[0].style.setProperty("background", "blue", "important");` selected the element and overrode the previous background style. https://jsfiddle.net/9reevhdu/ – Dan O Jun 08 '15 at 19:13
@DanO Your last comment is the closest post to an answer. I suggest that you update your answer with that solution. – showdev Jun 08 '15 at 19:33

score 0 · Answer 2 · answered Jun 08 '15 at 19:07

0

You have a typo here there is an extra space between the two editor:

<div class="editor_ editor_text">

Works fine without the extra space in this fiddle:http://jsfiddle.net/yutzjbjr/

edit

I see now that there are two classes involved. You should include your jquery in the question.

However still works fine with two classes: http://jsfiddle.net/yutzjbjr/1/

Can you maybe read the console?

answered Jun 08 '15 at 19:07

Michelangelo

5,888
5
31
50

I wish it was, but it's not, I specified it as is. It's intended to be like that and I'm not able to select it. I still tried it though in case a miracle occurs - it didn't. – BotistSab Jun 08 '15 at 19:12

Accessing a div with a complex class name

2 Answers2