Apply style to child elements with LESS

Question

This works:

.layoutList {
    background-color: #CFCFCF;
}
.layoutList > .entityCard.hover {
    background-color: #FFFFFF;
    border: 1px solid yellow;
}

Why doesn't this work the same as the above code? What is the appropriate way to "cascade" this in LESS so that everything is under the main .layoutList {} section?

.layoutList {
    background-color: #CFCFCF;
    .entityCard.hover {
        background-color: #FFFFFF;
        border: 1px solid yellow;
    }
}

Are you meant to write `:hover` rather than `.hover`, or is that the actual class name? — Albzi, Nov 26 '13 at 16:59
Ah ok just wondering, just didn't know if that was important or not :) — Albzi, Nov 26 '13 at 17:00

score 5 · Accepted Answer · answered Nov 26 '13 at 17:24

5

What you have for your LESS should work. It compiles to this CSS:

.layoutList {
  background-color: #CFCFCF;
}
.layoutList .entityCard.hover {
  background-color: #FFFFFF;
  border: 1px solid yellow;
}

The only thing missing is if you want the child combinator as your example shows, then you need to tweak your LESS to this (where the > was added):

.layoutList {
    background-color: #CFCFCF;
    > .entityCard.hover {
        background-color: #FFFFFF;
        border: 1px solid yellow;
    }
}

Which will then output this:

.layoutList {
  background-color: #CFCFCF;
}
.layoutList > .entityCard.hover {
  background-color: #FFFFFF;
  border: 1px solid yellow;
}

answered Nov 26 '13 at 17:24

ScottS

71,703
13
126
146

Crap my first test was apparently cached. Still playing with it, but I don't think this worked :( – Nov 26 '13 at 17:28
If it didn't work, then I'd have to say you had a seriously faulty LESS compiler you are using. It works clear back to version LESS 1.1 at [less2css.org](http://less2css.org/) – ScottS Nov 26 '13 at 17:32
Yeah sorry for the confusion, I had typed something wrong or something. It is working. – Nov 26 '13 at 17:33
This question was very helpful too: http://stackoverflow.com/questions/5117133/less-css-nesting-classes – Nov 26 '13 at 18:44
might be fair to point out that in your LESS you shouldn't leave a space between `>` and `.` in this case, as it shouldn't work with the space. – Victor Ramos Dec 08 '15 at 14:40
1

@VictorRamos: I do not see the point of your comment. Every LESS compiler I have used has no issue with a space between the direct child selector (`>`) and the `.` beginning a class name. – ScottS Dec 12 '15 at 04:29

Apply style to child elements with LESS

1 Answers1

Linked