Как выбрать родителя родителя в CSS?

Question

<div id="maincontent">
    <div id="content">
        <div id="admin"></div>
    </div>
</div>

Возможно ли иметь правило, которое будет соответствовать #maincontent, только если #admin существует с использованием только CSS?

Просто у меня есть цвет фона на панели управления, но я нехочу это там для посетителей.

Answer 1

Выбор родительского элемента?ну, вы можете с css4 !

$#maincontent #admin {
   background:hotpink;
}

, который работает .. в .. ммм ... чч ...

Однако с удивительным сценарием jquery, да, сэрcan!

cssParentSelector.js

Если вы любите CSS, это должно стать абсолютным инструментом во многих ситуациях

Answer 2

К сожалению, в CSS нет родительского селектора.

Вы должны будете использовать JavaScript для этого на клиенте

Answer 3

Нет не с CSS. В качестве альтернативы вы можете использовать просмотр класса CSS для администратора. Так что для админа

<div id="maincontent" class="adminBackground">
    <div id="content">
        <div id="admin"></div>
    </div>
</div>

И для обычных посетителей (обратите внимание, что атрибут class = "adminBackground" удален):

<div id="maincontent">
    <div id="content">
        <div id="admin"></div>
    </div>
</div>

Затем определите роль для этого класса "adminBackground":

.adminBackground {
     background: #AAAAAA;
}

Answer 4

К сожалению, вы не можете ориентироваться на родителя узла только с помощью селекторов CSS. Вы должны сделать это, используя Javascript или jQuery. Вот два примера того, как добиться того, чего вы хотите, используя javascript и jQuery.

Вот как в javscript:

if (document.getElementById("admin") != null) { // if there is a node with "admin" as ID
    document.getElementById("maincontent").style.backgroundColor = "#000"; // changes the background to black
}

Вот как в jQuery:

if ($("#admin").size() === 1) { // if there is a node with "admin" as ID
    $("#maincontent").css("background-color", "#000"); // changes the background to black
}