What is an adjacent brother? In what does he differ from a brother knot?

Question

One concept that confuses me when talking about HTML is that of adjacency, and of us brothers.

What is the difference of brothers and adjacent brothers ?

Answer 1

Brothers are elements that are on the same level as the DOM tree:

<div>div1</div>
<div>div2</div>
<p>p1</p>

div1, div2 and p1 are fraternal elements, because they are on the same level.

Adjacent brother (singular, as it is only one) is the element that is just after. In the example above, the div2 is the adjacent sister of div1, and the p1 is the adjacent brother of div2.

According to the definition of the term adjacent:

Adjacent is an adjective that qualifies something that is next to, or be, together or next to a certain thing.

In the case of CSS, it is something that comes SOON after, because the term Cascading Style Sheets (cascading style sheets) suggests elements always below the tree, like a cascade that always goes down. You can’t select top or top elements in the tree (except with Javascript).

Another example:

<div id="pai">
   <div>div1</div>
   <div>div2</div>
</div>
<p>p1</p>

The elements div1 and div2 are brothers, because they are on the same level within the div pai. Already the p1 is now the brother of div pai, and p1 is the adjacent brother of div pai because it comes right away and is on the same level in the tree.

In CSS you select siblings with the sign ~ between the elements and adjacent elements with +.

Select all the brothers of #div1 and turns the color red:

#div1 ~ *{
   color: red;
}

<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<p>p1</p>

Selects the adjacent sibling of #div1 and turns the color red:

#div1 + *{
   color: red;
}

<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<p>p1</p>