How to select element only without its child?

Question

Let's say I have a div with id="main" that contains multi-level random elements random elements:

 <div id="main">
    Main text
    <div>Random element
         <a>Random element
            <p>Random element</p>
         </a>
    </div>
 </div>

How do I target the content of #main only without all of its childs which is "Main text"?

With `#main` you *are* only selecting the top-level element, but the child elements are inheriting *some* properties. For example, try setting a border on `#main` - it won't be applied to all children. — CupawnTae, Oct 23 '16 at 09:07

score 0 · Answer 1 · answered Oct 23 '16 at 09:06

In this case, to work properly, you should make some changes in your HTML structure. So, using the CSS selectors, you can correctly select the target. Something like this:

HTML:

<div id="main">
    <p>Main text</p>
    <div class="random">
        <p>random text</p>
        <p>random text</p>
        <a href="#">
            <p>random text</p>
        </a>
    </div>
</div>

CSS:

#main > p {
    color: red;
}

How to select element only without its child?

1 Answers1