CODEWITHSUNDEEP
less
lavirius
lavirius

Reputation: 487

Extending nested selectors in LESS

I have the follwing HTML (basically)

table
  tr
    td
      .c1
      .c2
      .c3
    td
  tr
  ... more rows...
table

I would like to write LESS for the CSS that applys to the c1, c2, c3 on tr:hover. When you roll over the row the button inside the row have different properties. The output CSS would be:

.table tr:hover {
   color: red;
}
.table tr:hover .c1, .table tr:hover .c2, .table tr:hover .c3 .... {
   color green;
}

I looked at extend but, somehow, I can't figure out this particular use case. Or should I just use the & char. and nest inside table:tr:hover

& c1, & c2, & c3...

Upvotes: 0

Views: 309

Answers (2)

Aibrean
Aibrean

Reputation: 6422

You're trying to select a class within a pseudo class. That's not possible.

As I follow, it should be like this:

.table {
  tr:hover {
    color:red;
  }
  .c1, .c2, .c3 {
     tr:hover {
       color green;
     }
  }
}

How your HTML is setup is important. We aren't getting the whole picture here.

Upvotes: 0

peterdotjs
peterdotjs

Reputation: 1556

With the requirements you listed you will want to do something like this:

.table tr {
   &:hover {
     color: red;
     .c1, .c2, .c3 {
       color: green;
     }
   }
}

Think of & as anything you want to be at the same level as the parent level, whether it be a class or a pseudo class.

When you nest items usually it matches the HTML structure/hierarchy so deciding how and where to nest is fairly straightforward. You want to share as much as possible without going overboard in getting to "nested hell".

Upvotes: 2

Related Questions