CODEWITHSUNDEEP
htmlcss
Robert
Robert

Reputation: 10390

CSS rule set within another CSS rule set

I saw the following code style which is something that is completely new to me:

#nav {
  position: absolute;
  right: 0;
  ul {
    li {
      float: left;
      a {
        display: block;
        color: white;
        text-decoration: none;
        padding: 0 10px;
      }
    }
  }
}

What is the technical name for this and where can I read up on it?

Upvotes: 0

Views: 97

Answers (1)

hungerstar
hungerstar

Reputation: 21685

That is syntax for a CSS pre-processor. They allow you to use things like variables and selector nesting to create your CSS selectors.

For example a Less file might look like this:

@color: #CCC;

ul {
    background-color: @color;
    li {
        color: red;
        &:hover {
            color: blue;
        }
    }
    .home & {
        background-color: black;
    }
}

Would compile to:

ul {
    background-color: #CCC;
}
ul li {
    color: red;
    }
ul li:hover {
    color: blue;
    }
.home ul {
    background-color: black;
}

The two most popular options:

Upvotes: 4

Related Questions