Learning CSS — Chapter 3: The Document Object Model
Chapter 1: Up and Running with CSS
Chapter 2: An Intro to CSS Selectors
Chapter 3: The Document Object Model
Chapter 4: A Deeper Look at CSS Selectors
Why Discuss This Here?
The Document Object Model — commonly called the DOM — is a tree of the objects or elements that make up the HTML document. This tree is often compared to the likes of a family tree for a couple of different reasons. First, the elements within the tree include parent elements, child elements, grandparent elements, grandchild elements, and sibling elements. Second, if you were to literally draw it out, it would resemble a family tree. That said, it is not commonly discussed within the realm of CSS but I believe a good refresher on it is important before taking a deeper look at what CSS selectors are capable of doing.
Parent and Child Elements
The relationship of parent and child elements is pretty simple. A child element is any element that is contained within another element. On the other hand, a parent element is any elements that has another element within it. If you have done any work in HTML, you have seen this type of elemental relationship. One basic example would be inside of the body tag. Any tags that are directly inside the body tag are the children of the body tag. This would make the body tag the parent element.
Note: The text “Enter Page Title Here” is technically a child of the h1 tag as goes for any text within any HTML tag. The text is its own element within the DOM and therefore is considered as its own section within the DOM below the tag it is within.
Sibling Elements
Sibling elements are any elements that exist within the same tag. Using the same example above, we can add another element inside of the body tag which will be a sibling of the h1 tag, like so…
Grandparents and Grandchildren
Taking the idea one step further, we can add another element to the body. Now, if we give this new element a child element of its own, the body tag will have a grandchild and the added element will have a grandparent which is the body tag.
What’s Next?
Next, we will take a deeper dive into CSS Selectors using the information we just reviewed. Having a basic understanding of the DOM will assist in learning the upcoming section.
