2020-06-30
113
Тут всё просто: следующий сестринский элемент(following sibling) – по коду идет сразу после интересующего нас тега и имеет с ним общего родителя, а предыдущий сестринский (preceding sibling) представляет из себя тег предшествующий нашему и также имеющий с ним единого родителя. На нашей примере-ветке для <ul> это будет <p>, для <p> — <h1>, а для <h1> не будет предыдущего сестринского.
Аналогично и следующий сестринский (following sibling): для <h1> — <p>, для <p> — <ul>, для <ul> — нет.
Предыдущий и следующий
Предыдущий элемент (preceeding) — такой же предыдущий элемент по коду, только без ограничений сестринских отношений. Крайне похож на только что описанные нами связи, но есть нюансы - в этом случае для нас не имеет значения наличие общего родителя. Для нашей ветки: для <ul> это будет <p>, для <p> — <h1>, для <h1> — <div class="mainWrap">.
Аналогично следующий элемент (preceding) не имеет ограничений сестринских отношений: для <h1> — <p>, для <p> — <ul>, для <ul> — <li> (первый) и так далее.
|
|
|
Первый ребенок и последний
Первый ребенок (first child) — это первый дочерний элемент родителя в дереве документа, а последний (last child) — последний.
Корневой элемент
Им считается тег, который не имеет ни предков, ни родителей. Он включает в себя все «ветви» нашего дерева и открывается в самом начале документа (<html>), а закрывается в самом конце (</html>).
Вывод:
Если понимать структуру дерева элементов, а также все родственные связи в нем, можно не только легко и быстро ориентироваться в коде, а ещё дает возможность легче и точнее выбирать в CSS необходимые теги.
Литература
1) Айзекс А. Dynamic HTML BHV-Санкт-Петербург 1998
2) The Document Tree
3) W3C:: Requirements and Recommendations
