2

Possible Duplicate:
Is there a CSS parent selector?

I'm trying to style a paragraph with a class of "long-sentence" which contains a span with a class of "background-fill". The target for styling must be the paragraph and not the span.

Therefore, this solution is inappropriate as it targets the span:

p.long-sentence span[class="background-fill"]

This selector appears perfect, however it targets a span with an attribute of "background-fill" and not a class:

p.long-sentence[span="background-fill"]

Can it be done? Or is this too stringent a criteria for a selector that has multiple variables?

Community
  • 1
  • 1
Dale Rollinson
  • 268
  • 1
  • 5
  • 10
  • So to be clear, you want to change the style of the parent element of the `span.background-fill`? – justisb Dec 16 '11 at 03:03
  • I don't think this can be done without javascript. The fact that you're trying to style the parent conditionally is pretty strange to me. If you're dynamically generating this markup it would be trivial to give the parent paragraph an additional class so you can style it. – Ben Dec 16 '11 at 03:03
  • 3
    Check out this question: [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – Wesley Murch Dec 16 '11 at 03:06
  • Honestly, this is more similar to [this](http://stackoverflow.com/questions/1251768/css-parent-ancestor-selector), but that is also a duplicate of the same question this was closed against. Man, all roads really _do_ lead to JQuery :) – Tim Post Dec 16 '11 at 06:54
  • Yes, in answer to jblasco, I want to style the parent element of the span. I'll check out the other question. Pleeease don't tell me this needs JS! I'd rather use a workaround in CSS. – Dale Rollinson Dec 19 '11 at 04:17

1 Answers1

3

This needs to be used CSS selectors 4.

For example, the following selector represents a list item LI unique child of an ordered list OL:

OL > LI:only-child

However the following one represents an ordered list OL having a unique child, that child being a LI:

$OL > LI:only-child

The structures represented by these two selectors are the same, but the subjects of the selectors are not.

Form: http://www.w3.org/TR/2011/WD-selectors4-20110929/#subject

But there is no browser support CSS selectors 4 now. So you need to use JavaScript.

jQuery:

$("p.long-sentence:has(span.background-fill)").addClass("otherClass");
akai
  • 509
  • 2
  • 5
  • Thank you for the CSS4 idea, that seems to be an elegant solution. I have thought of a CSS workaround: move the styling from "span.background-fill" to a new (alternate) selector "p.long-sentence > span", then this (parent) selector should be able to be targeted with "p.long-sentence[span]" because the span is now without class (or ID). – Dale Rollinson Dec 19 '11 at 04:21
  • But...my workaround is only applicable where p.long-sentence contains only the span for background-fill and no other spans. – Dale Rollinson Dec 23 '11 at 02:04
  • `E[foo]` means an E element with a "foo" attribute – akai Dec 23 '11 at 14:17
  • It's a good idea to wait a little while (read: a year or two) for things to settle down before suggesting CSS4 selectors. As of 2012 the subject selector is now denoted by !. I have no clue when this is going to change again. – BoltClock Feb 10 '12 at 12:51