CODEWITHSUNDEEP
cssinheritance
cawecoy
cawecoy

Reputation: 2419

Apply css rule to parent only, not children

This is what I have:

.basic-content {
  color: purple;
}
.parent > li {
  color: red;
}
.parent > li > ul > li {
  color: blue;
}
<div class="basic-content">
    <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 class="parent">
        <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:

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?

Upvotes: 0

Views: 74

Answers (2)

Sandeep C. Nath
Sandeep C. Nath

Reputation: 927

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;
}

Upvotes: 1

Alexander Nied
Alexander Nied

Reputation: 13623

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 class="basic-content">
    <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 class="parent">
        <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>

Upvotes: 1

Related Questions