Changing elements CSS properties based on child element

Question

Possible Duplicate:
Complex CSS selector for parent of active child

This is my markup:

<ol class="wp-paginate">
    <li><span class="title"></span></li>
    <li><span class="page current">1</span></li>
    <li><a href="http://localhost/page/2/" title="2" class="page">2</a></li>
    <li><a href="http://localhost/page/2/" class="next">»</a></li>
</ol>

And I want to change the background-position property of the li element that has a span child with the class current. In this case, the second list item.

I do consider myself proficient with CSS, but I really cannot think of how to do that. Maybe there isn't a way, or I'm just having a brain fart.

Thanks!

At least not yet, soon (hopefully :) you'll be able to do this: `ul li! span.current {properties here will style the li, not the span}`. I was pretty sure it was `$li`, not `li!` (Paul Irish wrote about it on G+) but according to this it's not: http://dev.w3.org/csswg/selectors4/#subject. You could also try this jQuery plugin: http://www.jqueryrain.com/2012/01/use-css4-parent-selector-right-now-with-cssparentselector-js/ — powerbuoy, Mar 27 '12 at 02:08

Joseph Silber · Answer 1 · 2012-01-29T01:15:59.420

0

There's no way you can do this in CSS. You'll have to resort to Javascript for that.

If you really want to do this in pure CSS, you'll have to move the current class onto the lis themselves.

Side note: In CSS4 you'll be able to do the following:

.wp-paginate $li span.current { }

Needless to say, not a single browser currently supports this.

edited Jan 29 '12 at 01:15

answered Jan 29 '12 at 01:10

Joseph Silber

214,931
59
362
292

Argh, that's a pain. The wordpress plugin I'm using outputs its markup as that, which is a pain in the ass. Thanks though! – James Dawson Jan 29 '12 at 01:12
@MartinHoe - You can modify it using Javascript. Interested? – Joseph Silber Jan 29 '12 at 01:13
It's alright, I changed my CSS ruling to apply a lot of the properties to the `a` tags instead of `li`, and it works now. :) – James Dawson Jan 29 '12 at 01:19

score 0 · Answer 2 · edited May 23 '17 at 12:02

0

No, that's not currently possible with CSS. See: Is there a CSS parent selector?

You will need to either edit the html output, or perform the selection via JQuery.

edited May 23 '17 at 12:02

Community

1
1

answered Jan 29 '12 at 01:14

Matthemattics

9,577
1
21
18

score 0 · Answer 3 · answered Mar 27 '12 at 01:51

0

Its nearly impossible with javascript.

Using jQuery

$("li").each(function() {
  if($(this).find("span.current").length > 0) {
    $(this).css("backgroundPostion", "top left");  
  }
});

answered Mar 27 '12 at 01:51

Starx

77,474
47
185
261

Changing elements CSS properties based on child element

3 Answers3