<div id="maincontent">
<div id="content">
<div id="admin"></div>
</div>
</div>
Is it possible to have a rule that would match #maincontent only if #admin exists using just CSS?
It's just I have a background colour in the control panel but don't want it there for visitors.
Unfortunately, there is no parent selector in CSS.
You will have to use javascript to do this on the client.
Selecting parent element? well you can with css4!
$#maincontent #admin {
background:hotpink;
}
Which works.. in .. uhmm.. hh...
However with awesome jquery script, yes sir you can!
If you love CSS this should come as an absolute tool in many situations
No not with CSS. Alternatively you may use a CSS class hen viewing for admin. So for an admin
<div id="maincontent" class="adminBackground">
<div id="content">
<div id="admin"></div>
</div>
</div>
And for normal visitors (notice that the class="adminBackground" attribute is removed):
<div id="maincontent">
<div id="content">
<div id="admin"></div>
</div>
</div>
Then define a role for that class "adminBackground":
.adminBackground {
background: #AAAAAA;
}
Unfortunately, you cannot target a node's parent only by using css selectors. You would have to do so by using some Javascript or jQuery. Here are two examples of how to achieve what you want using both javascript and jQuery.
Here's how in 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
}
Here's how in jQuery:
if ($("#admin").size() === 1) { // if there is a node with "admin" as ID
$("#maincontent").css("background-color", "#000"); // changes the background to black
}
