How to make inheritance only for child element, excluding grandchildren and great-grandchildren?

S

Slyrax2015-11-19 16:36:37

css

Slyrax, 2015-11-19 16:36:37

Hello!
As you can see in the code below, the container div is the parent of Test1. Test1 nests Test2, and Test2 nests Test 3. Test 1 is the child of the div, Test 2 is the "grandchild" and Test 3 is the "great-grandchild". I want the red color to inherit only the child paragraph Test, excluding "grandchild" and "great-grandchild", so I wrote: div > p{,
but it didn't work, what's my mistake?

<!DOCTYPE html>

<html>
  <head>
    <title>TEST</title>
    
    <style>
      div > p{
        color:red;
      }
    </style>
  </head>
  
  <body>
      <div id="z">
        <p>TEST1
          <p>TEST2
            <p>TEST3</p>
          </p>
        </p>
      </div>

  </body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

G

GreatRash, 2015-11-19
@GreatRash

You can't nest p in p ...

R

Rsa97, 2015-11-19
@Rsa97

From the standard :
So from the browser's point of view, your html code looks like:

<body>
    <div id="z">
        <p>TEST1 </p>
        <p>TEST2 </p>
        <p>TEST3 </p>
        </p>
        </p>
    </div>
</body>

You can verify this by opening the development console (F12) in the browser and looking at the page structure. It is quite logical that all three paragraphs are descendants of the first level for the div and fall under the css rule.
As for inheritance, CSS stands for Cascading Style Sheet and inheritance cannot be canceled in it, you can only override it with a new style, like this:

div > p {
    color: red;
}
div > p > * {
    color: black;
}

L

L0k1, 2015-11-19
@L0k1

because style sheets, attention, cascading
answered without paying attention to the tag)
comrade GreatRash is absolutely right