How to correctly set styles, with several levels of nesting?

Question

css

Good day, gentlemen!
A very great desire to develop in the direction of the front-end developer, I'm at the beginning of the journey. I apologize for stupid questions.
Tell me, please, what am I doing wrong?
Example jsfiddle.net/7z7hxq9q/12 .
why doesn't div>p { color: blue } set the color only to its children, but extends to other < p >, at other levels of nesting ?
Thanks in advance.

Answer 1

Because in your html every P tag is a child of a DIV. That is, literally every one of your divs has an immediate child R. That's it.
That is, your div>p in this case to all such places:
The solution is to limit the div selector to the very top in the hierarchy specifically. For example, like this: jsfiddle.net/smsnvkvc
Start simple: htmlacademy.ru . There, a good quarter of the lessons are devoted to this very nesting. Learn all the basics in a month.