Is it possible to change a border based on the class inside?

Question

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;}

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

score 2 · Accepted Answer · answered Jul 20 '11 at 12:45

2

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

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

As seen in this jsFiddle

answered Jul 20 '11 at 12:45

ar3

3,463
3
19
22

score 1 · Answer 2 · answered Jul 20 '11 at 12:41

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.

answered Jul 20 '11 at 12:41

Marco

952
2
7
22

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

score 1 · Answer 3 · answered Jul 20 '11 at 12:48

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.

answered Jul 20 '11 at 12:48

Phrogz

271,922
98
616
693

score 0 · Answer 4 · answered Jul 20 '11 at 12:50

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.

answered Jul 20 '11 at 12:50

Drew

5,970
10
42
67

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

Is it possible to change a border based on the class inside?

4 Answers4