Как я могу применить стиль к div, используя CSS, если этот div НЕ содержит элемент с определенным идентификатором?

Question

Я пишу таблицу стилей CSS для добавления фонового изображения в div, идентифицируемый по имени класса следующим образом:

.scrollingResultsContainer
{
    background-image: url(https://mdl0133/widget/Images/gradient.gif);
    background-repeat: repeat-x; 
    background-attachment: fixed;
    color:#FFFFFF;
}

Это работает нормально, за исключением одной конкретной ситуации, когда я не хочу изображениепоявляться в scrollingResultsContainer.Как я могу указать, что изображение должно применяться, кроме случаев, когда scrollingResultsContainer содержит div с конкретным идентификатором?

К сожалению, я не могу изменить разметку, чтобы предотвратить возникновение этой ситуации.Мне было интересно, если это можно сделать с помощью селекторов CSS3.

Answer 1

Вы не можете сделать это с помощью CSS.Родительский селектор предлагался много раз, но всегда отклоняется, потому что, по-видимому, его слишком сложно кодировать или что-то еще: http://www.css3.info/shaun-inman-proposes-css-qualified-selectors/

Боюсь, вам придется использовать javascript.

Answer 2

CSS4 может сделать это возможным в будущем, см. http://davidwalsh.name/css4-preview.

Answer 3

Если единственное, что вы хотите сделать - это не показывать изображение, это довольно просто с помощью CSS. Вы можете использовать псевдоэлемент ::before на дочернем элементе <div>, чтобы покрыть изображение, и z-index, чтобы получить правильные слои.

Демо:

Выход:

CSS:

.scrollingResultsContainer {
    background-image: url( 'http://placekitten.com/100' );
    border: 1px solid black;
    display: inline-block;
    height: 100px;
    position: relative;
    vertical-align: top;
    width: 100px;
    z-index: -2;
}
.dont-show::before {
    background-color: white;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: -1;
}

HTML:

<div class="scrollingResultsContainer"></div>
<div class="scrollingResultsContainer">
    <div class="dont-show">don't show</div>
</div>
<div class="scrollingResultsContainer"></div>
<div class="scrollingResultsContainer"></div>

Answer 4

Переверните его в CSS, если вы знаете идентификатор заранее.

.scrollingResultsContainer {
    font-size: 200%;
}

#id_of_div {
    font-size: normal;
}