Selector for non-immediate child
Can someone tell me what a selector is for finding an element that is inside a parent, but not an immediate descendant. Example:
<body class="main">
<p class="text">Hello</p> <!-- don't select this one -->
<elem class="something">
<elem id="link">
<elem class="otherclass">
<p class="text">Hello</p> <!-- but this one -->
</elem>
</elem>
</elem>
</body>
so I want to search .text
through .main
without knowing the number of elements in between and using pure CSS.
thank
You can use the following selector:
.main > * .text
which will select all elements .text
that are descendants .main
but are not immediate children.
Next, select any .text
that is a child element .main
.
CSS
.main .text {
background-color: red;
}
JSFiddle: http://jsfiddle.net/3f20ojt8/
You can just use for the whole client element:
.main .text
{
/*css*/
}
DEMO
to avoid the descendant element (intermediate child) , you must add * between:
.main * .text
{
/*css*/
}
Recommended DEMOs