Apply css rule to parent only, not children-CodePudding

This is what I have:

.basic-content {
  color: purple;
}
.parent > li {
  color: red;
}
.parent > li > ul > li {
  color: blue;
}

<div >
    <p>I don't want to be a specific color, so I should be purple (the basic content color)</p>
    <p>I don't want to be a specific color, so I should be purple (the basic content color)</p>
    <p>I don't want to be a specific color, so I should be purple (the basic content color)</p>
    <ul >
        <li>I want to be red</li>
        <li>I want to be red</li>
        <li>I want to be red
            <ul>
                <li>I want to be blue</li>
                <li>I want to be blue
                    <ul>
                        <li>* I don't want to be a specific color, so I should be purple (the basic content color)</li>
                        <li>* I don't want to be a specific color, so I should be purple (the basic content color)</li>
                        <li>* I don't want to be a specific color, so I should be purple (the basic content color)</li>
                    </ul>
                </li>
                <li>I want to be blue</li>
                <li>I want to be blue</li>
            </ul>
        </li>
        <li>I want to be red</li>
        <li>I want to be red</li>
    </ul>
</div>

This is the result of the execution of that code:

Why is the last child list inheriting its parent's color (blue) if I created CSS rules for only its parent to be blue?

How can I set a color ONLY for the parents, keeping the children with the basic content color?

CodePudding user response：

Generally speaking, in CSS the styles for an element will be inherited from their nearest relatives. However, there are still ways to achieve what you want. For instance, in the modified snippet below, I changed your first style rule to:

.basic-content,
.basic-content * {
  color: purple;
}

That second .basic-content * selects any element inside of .basic-content at any level. This is then only overruled by the below rules for the content they target. I believe this is the effect you were trying to achieve.

.basic-content,
.basic-content * {
  color: purple;
}
.parent > li {
  color: red;
}
.parent > li > ul > li {
  color: blue;
}

<div >
    <p>I don't want to be a specific color, so I should be purple (the basic content color)</p>
    <p>I don't want to be a specific color, so I should be purple (the basic content color)</p>
    <p>I don't want to be a specific color, so I should be purple (the basic content color)</p>
    <ul >
        <li>I want to be red</li>
        <li>I want to be red</li>
        <li>I want to be red
            <ul>
                <li>I want to be blue</li>
                <li>I want to be blue
                    <ul>
                        <li>* I don't want to be a specific color, so I should be purple (the basic content color)</li>
                        <li>* I don't want to be a specific color, so I should be purple (the basic content color)</li>
                        <li>* I don't want to be a specific color, so I should be purple (the basic content color)</li>
                    </ul>
                </li>
                <li>I want to be blue</li>
                <li>I want to be blue</li>
            </ul>
        </li>
        <li>I want to be red</li>
        <li>I want to be red</li>
    </ul>
</div>

CodePudding user response：

That is called inheritance, it is inheriting the color from it parents. It happens implicitly.

You should be applying a color explicitly to the li as the second selector so that parent's color won't be applied to it unless specified.

.basic-content,
.basic-content li {
   color: purple;
}