Style an element only when there is no sibling element-CodePudding

Basically I want to style a p tag when it is not present inside another div.

For example

<div >
    <div >
        <p>I want to style here</p>
        <div >
            <p>I don't want to style here</p>
        </div>
    </div>
</div>

I tried the following but no luck

.container > :not(.secondClass)   p {
  color: red;
}

CodePudding user response：

Tou can change the style like this :

div > :not(.secondClass) > p {
    color: red;
}

CodePudding user response：

There are several ways you can do this, depending on context. See code below:

.container .row > p {
    background: red;
}

<div >
    <div >
        <p>I want to style here</p>
        <div >
            <p>I don't want to style here</p>
        </div>
        <p>I want to style here</p>
    </div>
</div>