css select child if other child has an image

Question

I've got some div elements that show up next to each other.

<div class="parentdiv">
    <div class="article-teaser-text2">
            some text ...<a href="http://example.com">Lees meer</a>      
    </div>
    <div class="article-teaser-image">
            <img src="somimage.png" >      
    </div>
</div>

I want to make the first div wider if the second div doesn't contain a image

is it posible to select the div.article-teaser-text2 if div.article-teaser-image > img

I thought something like:

div.article-teaser-image > img ~ div.article-teaser-text2

but that would select the div.article-teaser-text2 if it was a sibling of img if I'm not mistaken.

I know I can do this is jQuery but I'm looking for a CSS solution

score 0 · Answer 1 · answered Jun 24 '13 at 15:36

0

No. The current specs do not have such a selector and for good reason. Consider this analogy.

As humans we inherit the traits of our parents - skin color, eye color, height and a multitude of other phyical attributes. Now we are free to override some or all of these traits but we may never define our parents' trait.

Take this analogy to CSS and understand that children elements should never define the characteristics of the parent.

Applying this strategy there is a solution.

<div class="parentdiv HASimage">
    <div class="article-teaser-text2">
            some text ...<a href="http://example.com">Lees meer</a>      
    </div>
    <div class="article-teaser-image">
            <img src="somimage.png" >      
    </div>
</div>

Notice how I added the class "HASimage". Add a specific class to the parent to differentiate whether or not a child has an image. This can be easily be done with PHP or any server side language. In css then do the following:

.parentdiv .article-teaser-image {
     normal traits (without image)
}
.parentdiv.HASiamge .article-teaser-image {
     override traits and add extra traits (with image)
}

Hope that pushes you in the right direction.

Regards.

answered Jun 24 '13 at 15:36

ProfileTwist

1,423
1
12
18

1

CSS selectors are not humans. And we, the humans, need the parent CSS selector :( – nice ass Jun 24 '13 at 16:31
yes but the problem is that I want to do this doing CSS. If i need to add to a class to the parent div I might as wel change the html output so I get 2 different html views. – FLY Jun 25 '13 at 08:45
The reasons such selector is not supported is far and wide - quoted by leading developer of WebKit: "With parent selectors it becomes extremely easy to accidentally cause a document-wide grovel. People can and will misuse this selector. Supporting it is giving people a whole lot of rope to hang themselves with." – ProfileTwist Jun 25 '13 at 13:50
note: I'm not looking for a way to change a parent. I'm looking for a way to change a sibling which is supported. Changing the sibling on the condition of the inside of current element. But maybe that's just my perspective... – FLY Jun 25 '13 at 14:25
"Change the sibling on the condition of the inside of current element" - you still need to track up the dom tree thus requiring a parent selector. This can not be done in CSS. You can easily do this in Jquery but you already know how – ProfileTwist Jun 25 '13 at 15:05

css select child if other child has an image

1 Answers1