Thorough Explanation of CSS Nesting Description Methods and Rules

In this article, we have summarized the types and rules of CSS nesting.

If you can understand nesting, you can reduce the amount of description .

Be sure to understand the amount of description and rules for nesting from a beginner.

Nesting means using multiple elements

Nesting is using multiple elements to specify CSS in detail.

For example:

CSS
div p {
color:red;
}

This specifies p inside a div, and no style is applied to p that is not inside a div.

In this way, you can narrow down the elements that specify CSS.

The specification of an element within an element is called a descendant selector.

There are four types of nesting:

I will explain them one by one. Make sure you understand each feature.

descendant selector

As I mentioned earlier, it is a method of specifying an element that is inside a specific element.

HTML
<div><p>1</p></div>
<p>2</p>
<article><p>3</p></article>

CSS
div p {
color:red;
}

CSS puts half-width spaces between elements .

This specifies an element within an element.

In the CSS above, we specified p inside the div.

Text 1 has a p inside a div, so the style is applied.

Style 2 is only p and nothing outside so it doesn’t apply.

Text 3 is also inside an article, not a div, so it’s invalid.

In this way, even with the same p, you can determine whether or not the style is applied depending on whether it is inside the specified element or not.

It is convenient to use as follows.

CSS
main p {
font-size:16px;
}
aside p {
font-seize:14px;
}

The main area (main) has a text size of 16px, and the sub area (aside) has a text size of 14px.

Coding efficiency is improved by dividing CSS specifications for each area of ​​frequently used tags in this way .

It is also possible to increase the number of nesting

It is also possible to specify by increasing the hierarchy, such as an element within an element within an element.

HTML
<article><div><p>1</p></div></article>
<div><p>2</p></div>

CSS
article div p {
color:red;
}

The CSS describes p in the div in the artilce.

The target selector + half-width space is the same as when there are two elements.

Text 1 is applied because article, div and p are aligned.

However, text 2 is not applied because there is only p in the div and there is no article.

This selector can grow without limit .

All you have to do is add the target selector + half-width space.

In descendant selectors, adjacent elements in CSS do not need to be in a direct relationship in HTML.

HTML
<article><div><p>1</p></div></article>

CSS
article p {
color:red;
}

I specified p in the article with CSS.

The order of the HTML is article, div, p, but the condition of p “within” the article is satisfied, so the style is applied.

direct selector

You can style elements that are directly inside another element.

HTML
<article><p></p></article>

CSS
article > p {
color:red;
}

CSS describes “>” between elements .

This is a description of p directly under article.

An element directly below another element is called a child element. The element directly above is the “parent element”.

It seems to be the same as the descendant selector, but there is a big difference in the “direct descendant”.

Descendant selector is a description method that if there is p in article, it will be applied no matter what element is in between.

On the other hand, the direct descendant selector is not applied unless it is the p directly under the div, that is, the p of the child element .

HTML
<article><p>1</p></article>
<p>2</p>
<article><div><p>3</p></div></article>

CSS
article > p {
color:red;
}

Of text 1 to text 3, the style is applied only to text 1.

Like the descendant selector, it doesn’t apply because text2 isn’t inside an article.

Text 3 applies if it’s a descendant selector named p in article, but has no effect on the direct selector.

This is because there is a div between article and p, so p directly under article is not a child element.

Direct selectors like this allow you to pinpoint styling to elements at specific locations .

Adjacent Selector

A notation that applies a style to elements that are adjacent to an element.

An adjacent element is, in other words, the element that immediately follows another element .

HTML
<article><p>1</p></article>
<p>2</p>

CSS
article + p {
color:red;
}

CSS describes “+” between elements .

It is text2 that is styled in this description.

The statement p adjacent to article does not apply to text 1, which is p in article.

Immediately after is also important.

HTML<article><p>1</p></article>
<p>2</p>
<p>3</p>

CSS
article + p {
color:red;
}

In this case, text 3 is invalid because it does not immediately follow article.

HTML
<div>
<p class=”content”>
<p class=”detail”
</div>
<div>
<p class=”content”>
<p class=”detail”</div>

CSS
.contents + .detail {
color:red;
}

Only .details that have .contents next to them will be styled.

It is possible to specify CSS only for elements that satisfy the conditions like this.

It is also used when dynamically controlling HTML.

It is a technique that only applies the style to the element that came next to the specified element when the element appears and disappears .

indirect selector

It is a specification method for elements that are after the element that is the reference.

HTML
<p>1</p>
<p>2</p>
<h2>3</h2>
<p>4</p>
<p>5</p>

CSS
h2 ~ p {
color:red;
}

CSS describes “~” between elements.

With this, it became the description of p that is after h2.

Text4 and Text5 are styled in this HTML.

h2 and later, so h2 itself is not included.

Also note that it only applies to elements in the same hierarchy .

HTML
<p>1</p>
<p>2</p>
<h2>3</h2>
<p>キスト4</p>
<div><p>テキスト5</p></div>

CSS
h2 ~ p {
color:red;
}

With this description, only text 4 is styled.

Text 5 is also surrounded by p, but it is not treated as “after” because it is in the same hierarchy as h2.

CSS
h2 ~ div p {
color:red;
}

This way the style will be applied to text 5.

This method of specifying “after” is very convenient if you use it well.

HTML
<h2>1</h2>
<p>2</p>
<h3>3</h3>
<p>4</p>
<p>5</p>

CSS
h3 ~ p {
font-size:12px;
}

The description is to set the font size of text 4 and text 5 to 12 pixels.

The intention is that the text after h3 is less important than the text after h2, so it should not stand out.

HTML
<article>
<h2>1</h2>
<p>2</p>
<h3>3</h3>
<p>4</p>
<p>5</p>
</article>
<article>
<h2>6</h2>
<p>7</p>
<h3>8</h3>
<p>9</p>
<p>10</p>
</article>

With the outer box like this, text 7 is normal size, text 9 and text 10 are 12 pixels again.

The big point of indirect selectors is that they only apply to the same hierarchy .

multiple selectors

It’s not nested, but it’s very close to the CSS description.

A single CSS statement can apply styles to multiple selectors .

HTML
<h2>1</h2>
<p>2</p>
<ul>
<li>3</li>
<li>4</li>
</ul>

CSS
h2 , p , li {
color:red;
}

CSS describes “,” between elements.

This allows us to style multiple selectors at the same time .

In the above description, h2, p, and li are specified, so the style is applied to everything from text 1 to text 4.

Knowing this or not knowing it makes a huge difference in coding efficiency.

summary

We’ve already talked about CSS nesting.

Each has its own characteristics, and if you use them well, you will be able to write CSS efficiently.

Please remember this along with multiple selectors.