Is there a way to declare a CSS declaration that targets the parent of an element by id?
For example, I know the ID of my element, "element1" but I don't know the id of it's parent. I want to declare CSS information to target myDiv but I won't know it's ID.
HTML:
<div id="myDiv">
<div id="element1"> hello </div>
</div>
CSS:
#element1(parent) {
border:1px solid red;
}
No, right now there isn't. There's been talk of this in the WHATWG groups and the like for a long time, but until a year or two ago the browser vendors refused to support any proposals for such selectors because it would slow down CSS rule matching too much due to the way the DOM is parsed.
With advancements in DOM parser engines it is currently considered possible from the browser vendor end, and as such there is a proposal now to include some kind of target selector in CSS4, with even the syntax still under debate. Right now, there's no browser that supports any of the proposed notations, nor is any one of them even ready internally to support such feature.
The current CSS4 Selectors draft mentions the subject specifier, but even contains an explicit note right now that it's undecided whether, if this proposal holds, the ! should be prepended or appended to the selector, or if there should even be 2 of them.
You can do it with jquery, if you're not limited to just css:
$(document).ready(function(){
$("#element1").closest("div").css({"({"border":"1px solid red"});
});
For multiple parents use parents() and for the the closest one use closest(). Closest() is great because it only gest the first parent that matches you selection.
if you know the parent element it's a div:
div > #element1{
border:1px solid red;
}
but if you don't know what tag is parent of your element, read the whole thing first before using this code:
* > #element1{
border:1px solid red;
}
This reads as: all elements that are the direct descendant (which can only be one) of the element with id 'myDiv'.
There are some browser compatibility issues, but according to this post the guy says that it is compatible with IE 7, IE8, IE9 pr3, FF 3.0, FF 3.5, FF 3.6, FF 4b1, Saf 4.0 Win, Saf 5.0 Win, Chrome 4, Chrome 5, Opera 10.10, Opera 10.53 and Opera 10.60.
But the really bad thing about this code is that it might bring performance issues (although I didn't test) because you are forcing the browser to go through all the elements of the page (which can be extensive).
Now, if you want to be a good css coder and avoid these you should think the other way around, just like everybody else does, for instance, applying classes or id to the parent element(s). If you can't reach them then check if it is possible to insert a new div in your structure wrapping your #element1 element and being the parent of that element or even use javascript.
Not with vanilla css. You could try scss, less or some other dynamic css generation language.
You need nested declarations and parent selector support.
Here is an example that works in both scss and less:
#element1 {
#myDiv & { border: 1px solid red; }
}
Some references:
