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