2

Is it possible to have a div.class different based on a class that is inside it? So if i got like this:

<div class="defaultblock">
    <div class="blockcontent">
        <div id="group-id-tids-11" class="advertisement">
        </div>
    </div>
</div>

What I want is: 'IF an underlying div.class == advertisement THEN div.defaultblock {border : 3px;}

thirtydot
  • 224,678
  • 48
  • 389
  • 349
Highmastdon
  • 6,960
  • 7
  • 40
  • 68
  • 2
    No, you can't do that. Your question equates to this: http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – thirtydot Jul 20 '11 at 12:47
  • See also [Complex CSS selector for parent of active child](http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child). – Phrogz Jul 20 '11 at 12:59

4 Answers4

2

If using jQuery is an option, you could do something like this:

$(".blockcontent .advertisement").parent().css({border: "3px"});

As seen in this jsFiddle

ar3
  • 3,883
  • 3
  • 21
  • 22
1
.blockcontent .advertisment {border: 1px;}
.othercontent .advertisment {border: 2px;}

This should give you an idea how to nest properties... As far as I know you can't use this nesting to describe the outer properties. But not really sure... Note: this example changes the border of the inner div. Not the outer.

Marco
  • 960
  • 2
  • 7
  • 26
  • I think this would set border on advertisement class, isnt it? Question is to set border for parent class. – Aziz Shaikh Jul 20 '11 at 12:44
  • Thats why I wrote the "Note" to it... : ) As far as I know you can't describe the outer elements in some way. But if it is possible I would be glad to know too. ; ) – Marco Jul 20 '11 at 12:46
1

You cannot do this (select an ancestor based on child content, or select an element based on later siblings) with CSS alone.

As others have mentioned, JavaScript is an option here.

Phrogz
  • 296,393
  • 112
  • 651
  • 745
0

This is hackish, but using your own code:

<div class="defaultblock <?php echo $highlight; ?>">
    <div class="blockcontent">
        <div id="group-id-tids-11" class="<?php echo $highlight; ?>">
        </div>
    </div>
</div>

then in your CSS you just have to account for what you want .defaultblock.highlight to look like.

Drew
  • 6,208
  • 10
  • 45
  • 68
  • sorry, had PHP on the brain and somehow assumed you were using that too, when the original question was only CSS/HTML... – Drew Jul 20 '11 at 13:02