CODEWITHSUNDEEP
htmlcsscss-selectors
Peter
Peter

Reputation: 505

General sibling 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 the general sibling selector to target all descending siblings of h3 that are div elements.

Can someone explain why the "Nested division" is selected? I don't think it is a sibling of h3?

Upvotes: 5

Views: 106

Answers (1)

Guffa
Guffa

Reputation: 700870

The div actually is a sibling of the h3 element. You can't have a p element and a div element inside a p element:

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

Reference: 9.3.1 Paragraphs: the P element

When the browser encounters the second paragraph, it will end the first paragraph, so the second paragraph and the div element ends up 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 ending tag for the paragraph is optional, so a paragraph ends either with an ending tag, or where the next block element starts. The intended closing tag for the first paragraph is missing a starting tag, and ends up as a separate paragraph.

Upvotes: 8

Related Questions