Learning LESS CSS – Nested Rules

  • Avinash
  • 3
  • Jul 24, 2012
  • Tutorial

Here I comes with the next article in this article series. This article is about Nested Rules in LESS CSS. But before starting this article let’s have a look at what we have a covered so far.

Flashback

Upto now we have covered Introduction to LESS CSS, Variables in LESS CSS and Mixins in LESS CSS. So hopefully we are now done with the basics of the LESS CSS now it’s time to move further and get some detailed information about the LESS CSS.

LESS CSS – Nested Rules

Nesting of HTML element is the must required factor of the HTML page. I (In fact WE) can say that now a days no design can be converted to HTML without nesting of HTML elements. Let’s take an example of simple middle portion of the content.

Normally HTML of middle portion looks like below:

This is the content for the middle portion. This is SPAN inside P.

  <div class="middle">
    <p>This is the content for the middle portion. <span>This is SPAN inside P.</span></p>
  </div>

So for above HTML you need to create below CSS classes:

#middle { width:500px; background-color:#FFF; font-family:arial; } #middle p { font-size:12px; color:#000; font-weight:normal; } #middle p span { color:#333; font-weight:bold; }
#middle
{
  width:500px; background-color:#FFF;
  font-family:arial;
}

#middle p
{
  font-size:12px; color:#000;
  font-weight:normal;
}
#middle p span
{
  color:#333; font-weight:bold;
}

But hey wait here we are talking about LESS CSS. LESS CSS have provided very well way to create classes for Nested elements. Just have a look at below LESS CSS code which shows how to deal with the nested CSS rules. I will create rules for the same HTML structure.

#middle { width:500px; background-color:#FFF; font-family:arial; p { font-size:12px; color:#000; font-weight:normal; span { color:#333; font-weight:bold; } } }
#middle
{
  width:500px; background-color:#FFF;
  font-family:arial;

   p
   {
     font-size:12px; color:#000;
     font-weight:normal;

      span
      {
        color:#333; font-weight:bold;
      }
   }

}

But wait this is the simplest nesting of HTML Elements so what about the complex ones? Consider below HTML and Normal CSS code for the same:

This is the content for the middle portion.

This is the content for the middle portion.

This is the link.
  <div class="middle">
    <p>This is the content for the middle portion.</p>
    <p class="diff_p">This is the content for the middle portion.</p>
    <a href="#">This is the link.</a>
  </div>

So for the above HTML you will need below CSS code:

#middle { width:500px; background-color:#FFF; font-family:arial; } #middle p { font-size:12px; color:#000; font-weight:normal; } #middle p.diff_p { color:#333; font-weight:bold; } #middle a { color:#FC0; text-decoration:underline; } #middle a:hover { text-decoration:none; }
#middle
{
  width:500px; background-color:#FFF;
  font-family:arial;
}

#middle p
{
  font-size:12px; color:#000;
  font-weight:normal;
}
#middle p.diff_p
{
  color:#333; font-weight:bold;
}

#middle a
{
  color:#FC0; text-decoration:underline;
}

#middle a:hover
{
  text-decoration:none;
}

Now let’s see how we can achieve the same CSS with LESS CSS:

#middle { width:500px; background-color:#FFF; font-family:arial; p { font-size:12px; color:#000; font-weight:normal; &.diff_p { color:#333; font-weight:bold; } } a { color:#FC0; text-decoration:underline; &:hover{ text-decoration:none; } } }
#middle
{
  width:500px; background-color:#FFF;
  font-family:arial;

   p
   {
     font-size:12px; color:#000;
    font-weight:normal;
    &.diff_p
     {
          color:#333; font-weight:bold;
     }

    }

    a
    {
        color:#FC0; text-decoration:underline;
     &:hover{
        text-decoration:none;
      }
    }

}

Conclusion

So now we are done with the nested rules in LESS CSS. In next article we will see about inbuilt functions provided by the LESS CSS. Keep in touch for stay updated.

Related Posts

Written by Avinash

Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by:

  • http://www.itoctopus.com Fadi (itoctopus)

    The “less CSS” part is hard to read. I’ll take the redundancy of the normal CSS over less CSS anytime so that other developers can easily read my CSS (and vice versa).

  • http://www.facebook.com/martin.vandam.92 Martin van Dam

    Will this also work in IE?

    • http://www.xpertdeveloper.com/ Avinash

      Yes definitely. It will work for sure…