CSS "вложенный", если добавить атрибут в другой класс

#css #user-interface #css-selectors

#css #пользовательский интерфейс #css-селекторы

Вопрос:

У меня есть этот селектор:

 .ui-widget-overlay
{
    background: #262b33;
    opacity: .70;
    filter: Alpha(Opacity=70);
}

Я хочу иметь возможность делать что-то подобное:

 .ui-widget-overlay
{
    background: #262b33;
    opacity: .70;
    filter: Alpha(Opacity=70);

    .container: 
    {
        -webkit-filter: blur(5px);
    }

}

Что означает, что если этот селектор активен, добавьте этот атрибут в контейнер .

Возможно ли это? Или я должен использовать способ JS?

1. является ли контейнер родительским?

2. Да, это родительский div

3. Я бы использовал jquery для этого. Насколько я знаю, нет способа выбрать родительский элемент впоследствии? w3schools.com/cssref/css_selectors.asp

Ответ №1:

ДЕМОНСТРАЦИЯ

Вы можете использовать селектор атрибутов, например

 div[class="ui-widget-overlay"] .container {....}

html /* например */

 <div class="ui-widget-overlay">Test
    <div class="container">Container</div>
</div>

css

 .ui-widget-overlay {
    background: #262b33;
    opacity: .70;
    filter: Alpha(Opacity=70);
}
div[class="ui-widget-overlay"] .container {
    -webkit-filter: blur(5px);
    color: red; /* added to see a visible change */
}

1. Моя ситуация такова: jsfiddle.net/6ssD3/4 — Мне нужно применить размытие к контейнеру.

2. вы хотите применить -webkit-filter: blur(5px); к контейнеру или тесту?

3. к контейнеру, если применяется наложение пользовательского интерфейса-виджета.

4. В css пока нет родительского селектора, для этого вам нужно использовать jquery.

Ответ №2:

Вы можете сделать что-то вроде этого. http://jsfiddle.net/3p3j9/4 /

 .test1
{
    background:yellow;
    font-family:Arial;
}

.test1 > .test2
{
    background:cyan;
}

Контейнер будет применять дизайн, только если он находится внутри основного контейнера.

 <div class='test1'>
    test12345
    <div class='test2'>
        test123
    </div>
</div>
<div class='test2'>
    test1234567
</div>

Ответ №3:

Добавьте еще один класс и установите для него оба .container и .ui-widget-overlay —

 .ui-widget-overlay.nowActive {
    background: #262b33;
    opacity: .70;
    filter: Alpha(Opacity=70);
}

.container.nowActive  {
    -webkit-filter: blur(5px);
}

с помощью JS / jQuery добавляйте / удаляйте .nowActice , когда это требуется.

В jQuery это — .addClass()