apply css in element parent but not in child

Question

I want to make the line 3 containing img element also in green, how to do?

<div style="padding-top:5px;">

    <div class="right">line 1</div>
    <div class="right">line 2</div>
    <div class="right">
        <img src="https://upload.wikimedia.org/wikipedia/ro/f/f7/Stack_Overflow_logo.png"></img>
    </div>
    <div class="right">line 4</div>
    <div class="right">line 5</div>    
</div>

.right {
    background-color: red;
}

.right > img {
    background-color: green;
}

fiddle

ps. the IMG element appears dynamically, it is not predictable ..

What language creates this code dynamically? Can you manipulate it to add a `.green` class to the div which contains an image? And then add CSS `.green{background-color:green;}` ? — turbopipp, Sep 27 '15 at 19:48

score 3 · Answer 1 · answered Sep 27 '15 at 19:55

3

The solution with jquery >> solution

$("img.img-thumbnail").parents('div.right').css("background-color", "green");

answered Sep 27 '15 at 19:55

Fábio Zangirolami

1,856
4
18
33

1

It appears `$("img.img-thumbnail").parents('div.right').addClass('green');` is twice as fast on performance tests as the `.css` method. But if so, also remember to modify the CSS with `.green{background-color:green;}`. It's nice to know, but in your case it might not be necessary. It all depends on how many items is being affected, and the cumulative effect of the DOM manipulation. – turbopipp Sep 27 '15 at 20:28

turbopipp · Accepted Answer · 2015-09-27T20:09:39.587

0

jsfiddle demo

//HTML
<div class="wrapper">
    <div class="right">line 1</div>
    <div class="right">line 2</div>
    <div class="right">
        <div class="image">
            <img src="https://upload.wikimedia.org/wikipedia/ro/f/f7/Stack_Overflow_logo.png"></img>
        </div>
    </div>
    <div class="right">line 4</div>
    <div class="right">line 5</div>    
</div>

//CSS
.wrapper{
    padding-top:5px;
    background-color: red;
}
.right {
    width: 100%;
}
.image {
    background-color: green;    
}

Edit: OP was ok with a jQuery solution, and managed to find that answer himself

$("img.img-thumbnail").parents('div.right').css("background-color", "green");

Alternativ solution is also; $("img.img-thumbnail").parents('div.right').addClass('green');

//CSS
.green {
    background-color: green;    
}

edited Sep 27 '15 at 20:09

answered Sep 27 '15 at 19:21

turbopipp

1,245
2
14
27

I would like to know the reason for downvote? Is it not possible to wrap the image in a div? – turbopipp Sep 27 '15 at 19:23
I did not want to put a div enters the main div and the img element... (I also do not understand why downvote =/) – Fábio Zangirolami Sep 27 '15 at 19:30
1

It is possible to achieve what you aim for, but then you'd have to use javascript to determine the parent. It is much better to have a container for the image to target with CSS. The background in your original code targets the image, and that is not 100% of the width, therefore it does not fill it all. Parent div must be 100% wide, and target-able by id or class that makes it different from the other `.right` classes – turbopipp Sep 27 '15 at 19:34
1

Yes, I understand you .. but I'm baffled why not have css to do it, a simple thing ... – Fábio Zangirolami Sep 27 '15 at 19:37
I agree, it might become possible in CSS4 with a `:has(img)` or something like that. But for now, I'd recommend wrapping it in a full width container like my answer suggests. PS. If you feel you got a workable solution, please remember mark the answer as a thanks :) – turbopipp Sep 27 '15 at 19:43
Why the extra div and not just add the class directly to the parent? – JJJ Sep 27 '15 at 19:43
The IMG element appears dynamically, like he said above, so apparently he has no control over the parent class, but he has control over the image tag, and therefore might wrap it in a div..? – turbopipp Sep 27 '15 at 19:44
But somehow he'll have control to add extra elements? That's even *less* likely. – JJJ Sep 27 '15 at 19:45
To solve that conundrum, we would need the code that dynamically creates these parent divs :) Which is not supplied here – turbopipp Sep 27 '15 at 19:47
1

the found solution -> http://jsfiddle.net/qops5q0m/1/ i used the jquery.. Thank you for your attention!! – Fábio Zangirolami Sep 27 '15 at 19:52
1

Yes, if you use jQuery it is possible. jQuery is based on javascript. I only tried to supply you with a CSS solution, since that was your only tag, and it seemed like Javascript was not an option. Happy to see you found a solution. Did you already have jquery loaded on the page, or did you have to add jquery library to make it work? – turbopipp Sep 27 '15 at 19:55
I am already working with jquery in my project.. – Fábio Zangirolami Sep 27 '15 at 19:59
1

I'll accept your answer as a solution! you helped me a lot... =) – Fábio Zangirolami Sep 27 '15 at 20:00
1

you could give me upvote in my topic? – Fábio Zangirolami Sep 27 '15 at 20:01
1

Thanks, and sorry I didnt provide you the jquery solution sooner. I also knew that was a possibility as stated earlier :) I will add your jsfiddle to my answer – turbopipp Sep 27 '15 at 20:01

score -1 · Answer 3 · answered Sep 27 '15 at 19:12

-1

Add the following css:

.right:nth-child(3) {
    background-color:green;
}

http://jsfiddle.net/wqf9p56a/

answered Sep 27 '15 at 19:12

Sahil Ahuja

2,225
1
16
12

I can not use 'nth-child' because the IMG element appears dynamically, it is not predictable .. – Fábio Zangirolami Sep 27 '15 at 19:14

apply css in element parent but not in child

3 Answers3