Theory
Theory
Comments

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).

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>The website of a beginning coder</h1> </header> <main> <img class="avatar" src="img/raccoon.svg" width="80" height="80" alt="Avatar"> <nav class="blog-navigation"> <h2>Recent Posts</h2> <ul> <li><a href="day-1.html">Day One. How I forgot to feed the cat</a></li> <li><a href="day-2.html">Day Two. I want to become a coder</a></li> <li><a href="day-3.html">Day Three. My cat is offended at me</a></li> <li><a href="day-4.html">Day Four. How I almost got sick</a></li> <li><a href="day-5.html">Day Five. I am relaxing</a></li> <li><a href="day-6.html">Day Six. How I failed to understand anything</a></li> <li><a href="day-7.html">Day Seven. Muffin gave me an assignment</a></li> <li><a href="day-8.html">Day Eight. It’s getting very serious</a></li> <li><a href="day-9.html">Day Nine. Or more precisely night</a></li> <li><a href="day-10.html">Day Ten. Summing up</a></li> <li><a href="day-11.html">Day Eleven. Everything should be taken in moderation</a></li> <li><a href="day-12.html">Day Twelve. Everyone loves cookies</a></li> <li><a href="day-13.html">Day Thirteen. I found an article</a></li> <li><a href="day-14.html">Day Fourteen. A New Format</a></li> <li><a href="day-15.html">Day Fifteen. The Selfie Gallery</a></li> </ul> </nav> <section> <p>Greetings to everyone! Welcome to my first site. Up until just recently I had no idea what a coder does for a living, but now I have found <a href="https://htmlacademy.org/courses">interactive courses in HTML and CSS</a> and I have set myself the goal of becoming one. I even was assigned an instructor, Muffin, who does not allow me to slack off and will track my progress.</p> <p>My first assignment is to keep a diary and honestly write about all of my accomplishments.</p> </section> <section> Skills section </section> </main> <footer> Website footer </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: "Arial", sans-serif; color: #222222; background: #ffffff url("img/bg-page.png") no-repeat top center; } h1 { font-size: 36px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; background-color: #4470c4; border: 5px solid #2d508f; color: #ffffff; } /* Replace the selector below */ nav a { color: #ffffff; } /* Replace the selector below */ ul { list-style: none; padding-left: 0; } /* Uncomment the rule below */ /* .blog-navigation h2 { margin-top: 0; } */ /* Uncomment the rule below */ /* .blog-navigation li { margin-bottom: 5px; } */ footer { margin-top: 30px; }

Goalscompleted

Replace the tag selector in the nav a rule with the nested .blog-navigation a selector,
and then replace the selector in the ul rule with the .blog-navigation ul selector.
Uncomment the .blog-navigation h2 rule in the CSS editor,
and then uncomment the rule for .blog-navigation li.

Nested selectors

Comments

Log in

Sign up

Restore access