4

I am using jquery to insert html I get from the server into a div. Based on the div contents i'd like to adjust the syle of the container. I wrote up a simple html test. How do I tell css to apply this site when it has X child? After googling I tried :has and :contains with neither working. I don't want to keep my styles in JS as css makes more sense.

Demo: http://jsfiddle.net/wd9fk/

html

<div id="a"><div id="b">B</div></div>
<div id="a"><div id="c">C</div></div>

css

#a { height: 400px; border: 1px solid red;  }
#b { height: 200px; }
#a :has #b { height: 300px; border: 1px solid blue; }
BruteCode
  • 1,033
  • 6
  • 15
  • 20
  • 1
    Using jQuery it's easy. I'm not sure it can be done in pure CSS. – Denys Séguret Jan 08 '13 at 13:28
  • 1
    1) Not possible in CSS 2) Why do you have two `#a` in the same HTML? – BoltClock Jan 08 '13 at 13:28
  • Interesting! A definite +1. I shall try, though not sure... – Kangkan Jan 08 '13 at 13:28
  • @BoltClock: Oops, good catch! I guess that should be a class but in my real code its an id and b/c is inserted in – BruteCode Jan 08 '13 at 13:29
  • You better not use same ids for different elements. – F0G Jan 08 '13 at 13:30
  • possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – Quentin Jan 08 '13 at 13:33
  • which itself is a dup of http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child ... – Alex Feinman Jan 08 '13 at 13:38
  • @Alex Feinman: I'm still contemplating merging the two questions since their code and answers are so similar, but there's so much going on that I think I'll be keeping them separate for a while... – BoltClock Jan 08 '13 at 13:42
  • @user1955298 I think you should have picked Alec’s answer. The one you picked contains misleading information. – Cory Jan 08 '13 at 14:10

4 Answers4

7

You simply cannot traverse up the DOM in CSS. You will need to use JavaScript.

Here is an article explaining why: http://snook.ca/archives/html_and_css/css-parent-selectors

Long story short, it's due to the way CSS is read by the browser, and by introducing it, it would increase the performance hit by a factor of ten (at least!), because it would need to read every single node multiple times to see whether or not it fits the profile.

It's a nice thought, but it's simply not viable.

Nix
  • 5,202
  • 3
  • 24
  • 44
4

There is no parent selector for CSS yet, there are plans and it is being discussed though. In CSS Selectors level 4, a subject selector has been proposed, which would let you refer to elements this way:

ol! > li:only-child

Which then reads: “an ol element that contains a single li element” (this syntax is a proposal though), and would let you style the parent ol element.

If this proposal succeeds, subject selectors would be available in the next version of CSS selectors.

For now, Javascript is the way to go, until the subject selector becomes a standard.

0

You cannot traverse up the DOM to get the parent selector of current matching elements.

But you can do it with jQuery quite easy like this:

$('#Default a span.active').closest('.vehicle_details').css('background-color','#444');

Fiddle Demo

Felix
  • 36,929
  • 7
  • 39
  • 54
-1
#a > #b { height: 300px; border: 1px solid blue; }

Not sure if this is what you wanted, but give it a try.

Regards.

semir.babajic
  • 731
  • 3
  • 9
  • 4
    This will style `#b`if it is the immediate child of `#a`. I think this is the opposite what OP seeks. – Nix Jan 08 '13 at 13:32