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?
- 4Can you elaborate what the result should be?Jason Gennaro– Jason Gennaro2011-12-06 20:09:26 +00:00Commented Dec 6, 2011 at 20:09
- Agreed more info is needed or maybe the html markup you are working withTim Wickstrom– Tim Wickstrom2011-12-06 20:15:32 +00:00Commented Dec 6, 2011 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– linkyndy2011-12-06 20:18:07 +00:00Commented Dec 6, 2011 at 20:18
Add a comment |
4 Answers
No, you can't select something in CSS based on what it contains, which is essentially what you are attempting in the parentheses.
3 Comments
linkyndy
So...will have to try another approach. Too bad. Thank you for helping.
Nate B
It's an easy selector with JQuery, but not directly possible with CSS, sorry.
Tim Wickstrom
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
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/
1 Comment
linkyndy
Will go for the jQuery solution. Thank you!
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 
1 Comment
linkyndy
I wanted not to use additional ids...I hoped it can be resolved only with selectors and existing classes.
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
1 Comment
linkyndy
I wanted not to use additional ids...I hoped it can be resolved only with selectors and existing classes. But thank you anyway!