Nesting HTML and CSS Elements

The easiest way for me to describe Element Nesting is to use the following visual:

The gist is that one doll goes inside another, which goes into another, which goes into another! The same thing can happen with HTML and CSS elementsNesting is when one element or many elements go inside the opening and closing tags of another element. For example, you can have an image within a text div and when this occurs, we call it either HTML Nesting or CSS Nesting.

Let’s take a look at some examples:

In HTML

In HTML, it’s very common to see an element inside the opening and closing tags of another element. Here’s an example:

<div class=”Container” id=”NavBar”>
<a href=”#”>Home</a>
<a href=”#”>About</a>
</div>

The anchor tags, or <a> tags are nested within <div>. What this means is that all of the styling and properties of the <div> element will by default apply to the <a> elements. This can be modified with individual <a> element styling in your CSS Stylesheet! In programming terms, the <div> and <a> tags have a parent-child relationship, and thus are called parent or child elements.

Uhhh what?! Parent and child elements?!

Yep! Think genetics. Biological parents give their genes to their offspring! Same concept with the parent element giving it’s ‘genes’, or properties to its child. In the example above, take a guess at which is the parent element and which is the child element!

Made your guess?!

Parent Element:
<div class=”Container” id=”NavBar”>

Child Elements:
<a href=”#”>Home</a>
<a href=”#”>About</a>

That’s right! The <div> element is the parent to the child <a> elements! The properties of the parent <div> will apply to those of the child <a> element unless the <a> element is styled within the CSS Stylesheet.

In CSS

You can also use nesting in CSS! It’s possible and sometimes more efficient to style child elements that are nested within a parent element! Let’s take a look at our initial example:

If we head over to our CSS Stylesheet, you can style all of the <a> tag child elements that have the parent element <div id=”NavBar”> with the following selector:

#NavBar > a {

}

To summarize, #NavBar > a selects all of the <a> tags that have the parent element #NavBar or are within the #NavBar.

Now if we are to style this, all of the <a> tags that have the parent element #NavBar will be purple, and have a font-size of 40px!

#NavBar > a {
color: purple;
font-size: 40px;

}

To learn more about building a Navigation, or Menu bar, check out Building a NavBar!

 

Subscribe to Tech Talk Code for more Web Development tutorials!

Leave a Comment!