Suppose there is such a code:

<div> <p>Просто текст</p> <p>Еще текст</p> </div> <p>Тут что-то написано</p> <p>И тут что-то написано</p>

How can I specify styles for the 'p' tag that is in the 'div' tag, without specifying a class, etc.? When I taught css I was told to write

 div p { /*тут стили*/ }

But in practice it turns out some nonsense. How to do it right?

    2 answers 2

    Via selector > :

     div>p { color: red; } 
     <div> <p>Просто текст</p> <p>Еще текст</p> </div> <p>Тут что-то написано</p> <p>И тут что-то написано</p>

    although it works fine without it:

     div p { color: red; } 
     <div> <p>Просто текст</p> <p>Еще текст</p> </div> <p>Тут что-то написано</p> <p>И тут что-то написано</p>

      If you specify div p , the style will be applied to all p inside the div , regardless of the degree of nesting.

       div p{ color: red; } 
       <div> <p>Просто текст</p> <p>Еще текст</p> <section> <p>Опять текст</p> </section> </div> <p>Тут что-то написано</p> <p>И тут что-то написано</p>

      And if you specify div>p , then the style will be applied only to the "direct" children of the "first nesting level", note here for p , which did not apply the style inside the section , although it is also inside the div , but it is also nested another element

       div>p{ color: red; } 
       <div> <p>Просто текст</p> <p>Еще текст</p> <section> <p>Опять текст</p> </section> </div> <p>Тут что-то написано</p> <p>И тут что-то написано</p>