Nest CSS with Sass Tell us what's happening

HTML-CSS
1

Tell us what’s happening:

Your code so far


<style type='text/sass'>
  .blog-post {   
    h1 {
      text-align: center;
      color: blue;

      p {
        font-size: 20px;
      }
    }
  }
</style>

<div class="blog-post">
  <h1>Blog Title</h1>
  <p>This is a paragraph</p>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/sass/nest-css-with-sass

2 
h1 {
      text-align: center;
      color: blue;

      p {
        font-size: 20px;
      }
    }

You did not close the h1 { }, close it properly and then remove the extra closing tag after p { }

@Cody_Biggs missed key word, thank you

3

that solution doesnt look right. Removing that end } you have removed the closing for the blog post class. the h1 and p are suppose to be nested inside. Removing that removes the nest

@Sujith3021 I may be missing something. I only finished sass recently, so I want to make sure I understand. How is the h1 not closed properly?

the solution

.blog-post {   
    h1 {
      text-align: center;
      color: blue;

      p {
        font-size: 20px;
      }//closing p
    }//closing h1
  }//closing for blog post. if this is removed the elements are not nested and will fail test
4 
.blog-post {   
    h1 {
      text-align: center;
      color: blue;

      p {
        font-size: 20px;
      }
    }
  }

Based on the HTML structure, h1 and p exist inside.blog-post

From the structure you mentioned,
p becomes nested inside h1, but actually it is not.

therefore,

.blog-post {
   h1 {
   }

   p {
   }
}

Compare this with the HTML structure, h1 and p are nested inside .blog-post

Note: I did not say to remove the last }, i said after closing the h1 properly remove the extra bracket after p { } // not the last bracket

1 Like
5

With that sass you could only get to the p element if the html looked something like:

<div class="blog-post">
		<h1>
			hi
			<p>bob</p>
		</h1>
	</div>
6

@Sujith3021 I see what you are saying now, and that removing of the extra }. That does pass the challenge, however they need to fix the example in the lesson then.

The example. Following this the OP is right, but doesnt pass.

nav {
background-color: red;

ul {
  list-style: none;

  li {
    display: inline-block;
  }
}
}
1 Like
7

Actually, @Cody_Biggs

It is correct, because if you see, li elements are inside ul so it is correct mentioning that,

But the thing is it must not be compared to the challenge given, since the structure is different from the example.
ul > li // This is correct

Edit: They just give an idea but should be forced not to use the same structure in the challenge

8

Right. I did some testing, and found that out after a bit. The example is what through me off. With the lesson saying “use the nesting above” and the example they use looks just like what the OP has