3

Possible Duplicate:
Is there a CSS parent selector?

Hi!

I'm trying to select a parent node of a specific node (with a specific className) to apply some CSS style to it.

As far as I know, there only exist CSS3 selector operands for child elements, descendant, following nodes etc... So only some "forward" selection in the DOM document is possible. When the selector applies to some section in the DOM document, always the last element the selector describes, is being selected. Am I wrong? I hope so!

How do you select the first <div> element in the following example? Let's say that there may exist a lot of other <div>s containing <p>s and I only want to select the <div>s containing a p.foo but not p.bar. Note that I want to select the <div> rather than the <p>!

<div>
    <h1>Test</h1>
    <p class="foo">Some text</p>
</div>
<div>
    <h1>Test 2</h1>
    <p class="bar">Some other text</p>
</div>

Thanks in advance!

Community
  • 1
  • 1
leemes
  • 42,229
  • 18
  • 115
  • 172
  • Exact duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – Matt Ball Apr 01 '11 at 17:03
  • @Matt Oh sorry, didn't found it when I searched for it... So it may be closed I think. Thanks for the link. – leemes Apr 01 '11 at 17:08
  • 1
    If you search for "css parent selector" it's the top result, with 31,000 views. – Matt Ball Apr 01 '11 at 17:09
  • 1
    I used the "implicit" search when asking a question and entering a title... However, this search didn't find any useful results. Next time I will spend some more seconds in searching, promise ;) – leemes Apr 01 '11 at 17:14

1 Answers1

6

Indeed a "parent selector" doesn't exist.
You can see the list of selectors here: http://www.w3.org/TR/css3-selectors/#selectors

You could give your parent node an id and then select the parent with its id.
Otherwise I don't see any solution to access the div from bottom up using solely CSS.

brillout
  • 8,117
  • 9
  • 60
  • 74
  • thanks, but giving it an ID is not possible since I can't modify the document (it's an CSS added to a website using the "stylish" browser plugin)... I guess that I need some script to get it done... – leemes Apr 01 '11 at 17:10
  • 1
    instead of using javascript's parentNode you could try to access the div with "normal" top down selectors. in fact i would be surprised if you couldn't. quite all websites are using CSS leading the creator of the website make most of the elements "selectable" – brillout Apr 01 '11 at 18:54
  • +1 for this hint... I'm trying to do so. To be clear, I want to create a CSS based facebook ad blocker and therefore select the facebook sponsor box on the right side to make it `display: none;` which hasn't any own class name or ID. All other ads (e.g. in the picture theater view) are easily selectable. – leemes Apr 01 '11 at 19:04
  • 1
    #pagelet_adbox,#pagelet_ego_pane{display:none!important} works in my case for the main FB page ;-) – brillout Apr 01 '11 at 19:09
  • are you sure that the #pagelet_ego_pane is always something ad-related? (in fact it contains suggestions of things your friends like, but I'm not sure if this is everything which will be covered by #pagelet_ego_pane)... +1 though :) [edit] this will also cover friends suggestions (friends you might know) which is quite useful IMHO... – leemes Apr 01 '11 at 19:13
  • yeah but's its a -- i have to admit strange -- feature of FB: its promoted friend activity. if you ask me it's ad :-) – brillout Apr 01 '11 at 19:15
  • kay, no more "+1" but thanks. I will use your suggestion for my ad blocker. The "no parent selector" thing is quite annoying though, since it would have been quite useful in a lot of scenarios! Hope that it will come in CSS4, whenever this will come... :) – leemes Apr 01 '11 at 19:17