CSS selector precedence issue

Question

I have an to write a selector similar to:

div#content > section (.left > img) + .left

but obviously the parenthesis are ignored. How should I rewrite this? Or it isn't possible in plain CSS?

Agreed more info is needed or maybe the html markup you are working with — Tim Wickstrom, Dec 06 '11 at 20:15
Well, yes, I have a section in my main content div. I want to style each .left class which is directly preceded by another .left class, which, in turn, has an img child beneath it in the tree. — linkyndy, Dec 06 '11 at 20:18

score 2 · Answer 1 · edited May 23 '17 at 12:03

2

No, you can't select something in CSS based on what it contains, which is essentially what you are attempting in the parentheses.

It's best explained by this question on SO.

edited May 23 '17 at 12:03

Community

1
1

answered Dec 06 '11 at 20:15

Nate B

6,246
23
23

So...will have to try another approach. Too bad. Thank you for helping. – linkyndy Dec 06 '11 at 20:27
2

It's an easy selector with JQuery, but not directly possible with CSS, sorry. – Nate B Dec 06 '11 at 20:27
jQuery mootools dojo you name the lib and its uber simple, check out the fiddle I created below to see one jQuery solution to this problem – Tim Wickstrom Dec 06 '11 at 21:54

score 1 · Accepted Answer · answered Dec 06 '11 at 21:25

1

What your trying to do is not possible at least not as of the latest css3 spec.

If your not wanting to add via the server, maybe a bit of jQuery?

See this fiddle as it does what you want very easily

http://jsfiddle.net/4qZpc/2/embedded/result/ - results!

Grab the code: http://jsfiddle.net/4qZpc/2/

answered Dec 06 '11 at 21:25

Tim Wickstrom

4,396
2
18
31

Will go for the jQuery solution. Thank you! – linkyndy Dec 09 '11 at 12:10

score 0 · Answer 3 · answered Dec 06 '11 at 20:13

0

How about giving the section an id (assuming you have multiple sections) and then doing something like:

#content-section img + .left

I'm not entirely sure what effect you're trying to achieve here, but if there isn't a particular case where a .left element directly follows an img other than here, you should be safe.

Alternatively, if you have nested .left elements, you could do:

#content-section img + .inner-left

answered Dec 06 '11 at 20:13

U-DON

1,996
11
13

I wanted not to use additional ids...I hoped it can be resolved only with selectors and existing classes. – linkyndy Dec 06 '11 at 20:19

score 0 · Answer 4 · answered Dec 06 '11 at 20:42

0

You'd have to add server-side an .image_in_it class on each element with .left class if it contains an img element.

<div id="content">
    <section>
        <div class="left image_in_it">
            <img src="" alt="">
        </div>
        <div class="left">
        </div>
    </section>
</div>

and then div#content > section > .left.image_in_it + .left would select any .left directly following .left.image_in_it

answered Dec 06 '11 at 20:42

FelipeAls

20,411
7
49
71

I wanted not to use additional ids...I hoped it can be resolved only with selectors and existing classes. But thank you anyway! – linkyndy Dec 06 '11 at 20:44

CSS selector precedence issue

4 Answers4