Как изменить внешний DIV при определённом содрежимом?

Question

[w_b_x]

Доброго времени суток.

Встал простой и глупый вопрос, который не удалось найти в гугле на первых порах. Как через css менять внешний элемент при наличии в нём чего-либо?


Есть код:

<div class="test"></div>
<div class="test"><img src="test.jpg"/></div>

Нужно чтобы:
Если div пустой, то его рамка красного цвета.
Если в div есть img, то его рамка была белого цвета

Думал так:
img < .test {border:1px solid white;}
но не работает...

Answer 1

[Олег]

.test {border: solid 1px white;}
.test:empty {border-color: red;}

Answer 2

[khipster]

Это надо делать на JavaScript, т.к. это уже логика, а не оформление.

Comments

[w_b_x]

Просто наоборот же мы можем менять.
Т.е писать например:
.test > img{
border: 1px solid red;
}

Неужели нету обратной конструкции?

[Elwen]

w_b_x: нету, обратиться через css к родительскому элементу нельзя

[khipster]

w_b_x: Это селектор, он ничего не "думает", он просто отыскивает элемент в DOM.

Answer 3

[Максим Козлов]

Можно вместе с картинкой в него добавлять класс:

<div class="test active"><img src="test.jpg"/></div>