1. Technology

CSS Relationships

HTML Tag Relationships and How they Impact CSS Selectors


HTML documents are said to be contained on a "tree", but rather than thinking of this tree like an elm tree in your backyard, you should think of it as a family tree, with familial relationships among all the tags. CSS then uses those relationships to apply styles to specific elements within the tree. But if you don't understand what those relationships are, you will have a hard time applying your styles correctly.

Understanding the HTML Document Tree

Here is a simple HTML document tree of a document with 3 divisions, 2-item list for navigation, 3 paragraphs in the main div, and an image in the third div. It is based off the 3 column layout template.

(2)    head
(3)        title
(4)            CONTENT
(5)        style
(6)    body
(7)        div
(8)            div
(9)                h2
(10)                    CONTENT
(11)                ul
(12)                    li
(13)                        CONTENT
(14)                    li
(15)                        CONTENT
(16)            div
(17)                div
(18)                    h1
(19)                        CONTENT
(20)                    p
(21)                        CONTENT
(22)                        em
(23)                            a
(24)                                CONTENT
(25)                    p
(26)                        img
(27)                        CONTENT
(28)                    p
(29)                        CONTENT
(30)                div
(31)                    h2
(32)                        CONTENT
(33)                    p
(34)                        a
(35)                            img

Each item that is inside another item is indented to indicate it's relationship.

HTML Descendants

When you view an HTML document tree like this, you can see right away which elements are descendants. In fact, the only element that is not a descendant is the HTML element - at the very top.

When you use a CSS descendant selector you match that element, anywhere in the tree, that is a descendant of the other. For example, if you had a CSS decendant rule matching all IMG tags that were descendants of DIV tags, you would match both line 26 and line 35. But matching all A tag descendants of EM tags would only match line 23, not line 34.

CSS descendant selectors are written with the two tags separated by a space and nothing else.

div img { ... }
em a { ... }

You can also use the CSS universal selector (*) to skip generations of descendants. For example: p * a { ... } would match the A tag on line 23, but not the A tag on line 34.

HTML Children

Child elements are those elements directly below another element. Only the HTML or root element is not a child element. In my example above, the DIV on line 7 is the child of the BODY tag. The EM on line 22 is the child of the P tag on line 20.

You can style elements that are children using the child selector (>) between the two tags.

body > div { ... }
p > em { ... }

HTML Siblings

Like in a family tree, HTML siblings are those elements that descend from the same immediate tag or parent. So, in the example above, the two LI tags on lines 12 and 14 are siblings, as are the H1 and 3 P tags on lines 18, 20, 25, and 28.

In CSS 2 you can select tags that are directly next to one another in the document tree. These are called adjacent siblings. With this selector, you could style the P on line 20 by selecting the P that is an adjacent sibling to the H1.

h1 + p { ... }

In CSS 3 you can also specify any sibling following the first element in the document tree. This is called the general sibling combinator (~). If you use it instead of the plus-sign (+) in the above example, it will style every P tag in the main div, lines 20, 25, and 28 because they are all siblings following the H1 tag.

h1 ~ p { ... }

©2014 About.com. All rights reserved.