2

Is it possible to apply a style to the outer div in this example, using only CSS and the fact that there is an inner div of class "error"? 

<div>
  <div class = "error">
  </div>
</div>

I know I could do it in javascript.

EDIT

Since it's not possible in pure css, is it really inefficient to do something like this? Is there a cleaner way? I can't easily change the dom. For background, the error classes are automatically wrapped around labels/inputs in rails but I want to style the containing DIVs.

$(".error").parent().addClass("error-wrapper");
spike
  • 9,284
  • 7
  • 47
  • 80
  • No. CSS has no method of bubbling back up to a parent. It's a top-down system only. – Marc B Oct 17 '11 at 16:11
  • possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – zzzzBov Oct 17 '11 at 16:11
  • @spike, if you're going to ask a new question, please create a new question. – zzzzBov Oct 17 '11 at 16:14
  • @zzzzBov Well, it seems relevant to my original question and the title. I can create a new question if that's better though. – spike Oct 17 '11 at 16:16

2 Answers2

2

It is not possible using only CSS. There is no way to find an elements parent in the DOM tree.

But is pretty easy to use something like jQuery.

$(".error").parent().addClass("example");
472084
  • 17,079
  • 10
  • 56
  • 78
  • Well it would be more efficient to use pure JS & stay away from jQuery. Or even better, if your error-wrapper class is inside another div with an id/class you could use that div to add style as its child. – 472084 Oct 17 '11 at 16:17
  • sorry hadn't even seen your JS snippet before I added one to my question. seems like the best way for me. – spike Oct 17 '11 at 16:18
1

The problem with using JavaScript is that only those who have it enabled will see the cosmetic change. If this is only a minor modification to what the page looks like, go for it. The average user with JavaScript disabled won't even notice that styles are missing. If this is a major modification where elements will appear randomly around the page if JavaScript is disabled, then this is not a very good alternative.

Ultimately, the use of JavaScript in this way is a bad habit. You're just adding another class to the division when in reality it would be better to go do that in your backend. Make the server do it, not the user. This is like telling customers to go to your backstock area to find additional quantities of some item rather than just going and stocking the shelf on your own.

animuson
  • 50,765
  • 27
  • 132
  • 142
  • I agree that it's not ideal, but it would be a *huge* pain for me to fix it on the server, and it's a purely cosmetic background style for the wrapping div that users without JS don't need to see. – spike Oct 17 '11 at 16:22
  • @spike: I've always told programmers to *change it now, because later on there will just be more to change*. But if it's just a background you're adding, I don't see a huge problem with applying it with JavaScript. – animuson Oct 17 '11 at 16:24