Interactive online courses HTML Academy
2026-03-09 10:55 Diff
https://htmlacademy.org/courses/html-css-basics/css-essentials/nested-selectors

If you need to use the tag selectors less frequently and the tag selectors more frequently, then will you have to add a class to each tag in the markup? No, this would make our code unnecessarily complicated.

What was the reason for the classes that we used? In order to limit the number of tags to which the CSS rule will be applied: it will not be applied to all tags, but rather only to the tags with the desired class. However, there are other ways that allow us to limit how we apply styles. Here is an example of a list inside the navigation block:

<nav class="blog-navigation"> <ul>…</ul> </nav>

How can we apply styles to just this list? The first method is to add a class to it and to use the selector for this class. The second method is to use a special selector so that styles are applied to the lists inside the block with blog-navigation class.

You can combine any selector types by listing them with a space between them. These selectors are called descendant or contextual selectors, and we read them from right to left. For example:

/* The a tags inside the nav tags */ nav a {…} /* The ul tags inside the tags with the menu class */ .menu ul {…} /* The tags with the title class inside the tags with the post class */ .post .title {…}

Did you recognize the nav a selector from the second assignment? It helped us to format only those links that are inside the navigation block white. It left the links in the rest of the text dark blue.

You can combine any number of selectors, but it is best practice not to nest more than two or at most three of them. The nested selectors save us from having to invent class names and clutter up our markup with them.

Let’s change a couple of selectors in the blog styles, and at the same time we will improve the design of our headings and list items within the navigation block (by already using the correct selectors).