All geek questions in one place

Generic selector - odd behavior

As far as I understand, the general sibling selector in CSS selects the descending siblings of an element.

Consider the following code:

<head> <style> h3 ~ div { color: #FF00FF; } </style> </head> <body> <h3>Header 3</h3> <div>Sibling divivion</div> <p> <p>Nested paragraph</p> <div>Nested division</div> </p> </body>

I would expect a common sibling selector to target all downstream h3 siblings that are div elements.

Can someone explain why Nested Split is selected? I don't think this is brother h3?

+5
source share
1 answer

div actually a child of the h3 element. You cannot have the p element and div inside the p element:

"The P element is a paragraph. It cannot contain block level elements (including P itself).

Ref: 9.3.1 Points: P element

When the browser encounters the second paragraph, it will complete the first paragraph, so the second paragraph and the div element end after the first paragraph:

 <h3>Header 3</h3> <div>Sibling divivion</div> <p></p> <p>Nested paragraph</p> <div>Nested division</div> <p></p>

The end tag for the paragraph is optional, so the paragraph ends with either the ending tag or the next block element begins. The proposed closing tag for the first paragraph skips the start tag and ends as a separate paragraph.

+8
source

Source: https://habr.com/ru/post/1208851/

More articles:


All Articles