Child selectors

Question

Recently I started learning HTML + CSS and ran into a problem, passing moments with child selectors. There is a simple code:

<div> <p>Известно, что пустыня обладает неправильной формой, которую принимаем прямоугольной. Это достигается одним из двух способов — <i>включением частей</i>, выходящих за пределы области пустыни или их <i>отбрасыванием</i></p> </div> <p> <h1>Текст1<h2>Текст2</h2></h1> </p>

Styles are:

 p > h1{ color: red; } h1 > h2{ color: blue; }

Neither the first nor the second style works at all. I do not know why this is happening.

Headings h not embedded one into the other. There is also no need to put them in p . Tag hierarchy must be observed. - Rustam Gimranov

Accepted Answer · 2019-04-26T20:29:03

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

Paragraphs are automatically closed if the blocking-level element is parsed before the closing </p> tag.

i.e

A paragraph (paragraph) is a block (translation?) Element, it is automatically closed if another block element starts before the closing </p> tag is encountered.

Thus, in the page DOM-tree there are no h1 elements inside the p elements. The same is true for h2 elements inside h1 elements.

I understood about the <p> tag, but did not understand about h1>h2

h1 and h2 are also block elements, one cannot be inside the other. Even if you write the html markup as in the question, the browser will still create non- h1 and h2 elements.

 <h1>Текст1<h2>Текст2</h2></h1>

I understood about the <p> tag, but did not understand about h1> h2
Yes, but just a block div too, but you can also write <div> <h1> Example </ h1> <div> </ div> </ div>

Answer 2 · 2019-04-26T21:10:52

 div>h1 { color: red; } div>h2 { color: blue; } div i { color: green; }

 <div> <p>Известно, что пустыня обладает неправильной формой, которую принимаем прямоугольной. Это достигается одним из двух способов — <i>включением частей</i>, выходящих за пределы области пустыни или их <i>отбрасыванием</i></p> </div> <div> <h1>Текст1</h1> <h2>Текст2</h2> </div>

The > sign is optional, enough space.

If you have a goal to build a sentence from the headers visually or something like this, then:

 div.zagolovki, h1, h2 { display: inline-block; } div.zagolovki h1 { margin-right: 5px; }

 <div class="zagolovki"><h1>Текст1</h1><h2>Текст2</h2></div>

I understood about h1, they cannot be nested because they are block, but <div> <h1> Example </ h1> <div> </ div> </ div> because it works and it is also block.
@ Sergey Patient they are automatically transferred in html-code.
@ Sergey Patient is your code: <h1> Text1 <h2> Text2 </ h2> </ h1>.
Enter it, for example, into a regular html page, and see how the tags are displayed as a result.
Yes, and visually it will immediately be noticeable that at the beginning h1 is from above, and h2 is from below.
if you want to do the text inside the text, then do it with a div or span for example.
My goal is to understand the following: it was written to me above that when writing <h1> <h2> </ h2> </ h1> it will not work to apply a similar style h1> h2 because they are block but if you write <div> <div> </ div> </ div> you can do div> div {color: red;} and everything will work.

Child selectors

2 answers 2

More articles: