Is this CSS usage valid for targeting nested divs?

css, nested, nested-class

Solution

First of all: yor way is totally ok and the efficiency depends on the whole page. Maybe it can get more efficient with those ideas:

If your div-classes or ids are unique

You can also write just the class - you dont have to write the whole path then. Instead of

#content > .inner > .content > div { }

it is possible to write for example

.content > div { }

Helpful when you are using nested divs

When using nested divs you very often have to type a lot of code multiple times:

#content > .inner > .content { }
#content > .inner > .content > div {}
#content > .inner > .footer {}
#content > .inner > .footer > div {}

There are very helpful scripts called LESS and SASS (both of them work pretty much the same). They allow you to write everything just one time like

#content {
   .inner {
      .content {
         // some stuff
         div {
            // some stuff
         }
      }
      .footer {
         //some stuff
         div {
            // some stuff
         }
      }
   }
}

Problem

basically just want to know if the attached image shows a valid CSS usage? I'm using a lot of nested divs lately and this is how I'm targeting them in my CSS. It works really well but I'm just curious if it's a good way of doing it? Or is there an easier / more efficient way? Thanks! link to the image

Original source