You must have noticed that HTML has a very specific structure and visual hierarchy with different components nested within one another. *This is not the case with standard **CSS**.* 

However, **[Sass](https://www.educative.io/answers/beginners-guide-to-sass)** lets you nest your CSS selectors in a way that is very similar to the hierarchal nesting in HTML. Consider the example below that shows styling using SCSS and CSS:



## SCSS
```css
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

```

## CSS
```css
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}



```


Note that the `ul`, `li`, and `a` selectors are nested inside the `nav` selector in SCSS. This makes your CSS code very readable and more organized. However, it is important to keep in mind that too many nested rules will make your code more difficult to debug and maintain.

Nesting CSS selectors with Sass

Sass allows CSS selector nesting similar to HTML structure, improving readability and organization.