Clever Geek Handbook

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

+4


source to share


3 answers


You can use the following selector:

.main > * .text


which will select all elements .text

that are descendants .main

but are not immediate children.

+4


source


Next, select any .text

that is a child element .main

.

CSS



.main .text {
    background-color: red;
}

JSFiddle: http://jsfiddle.net/3f20ojt8/

+2


source


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

+1


source






More articles:


All Articles