cssnestednested-class

Is this CSS usage valid for targeting nested divs?


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!

Illustrationlink to the image


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
             }
          }
       }
    }