0

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...
lavirius
  • 467
  • 1
  • 5
  • 15
  • Can you please show us how you tried extend so that we can see if there are any errors with the model you had tried. – Harry Mar 11 '15 at 16:26
  • Nice to see the HTML structure mate. I think the simplest solution would be the one suggested by peterdotjs. – Harry Mar 11 '15 at 17:03

2 Answers2

2

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".

peterdotjs
  • 1,526
  • 1
  • 13
  • 19
  • Also works with & .c1, & .c2, & .c3 {color: green} because "& .c1" means ".table tr:hover .c1". But I guess both methods have the same output although, initially, I assumed ".c1, .c2, .c3" without the & would output "table tr:hover .c1, .c2, .c3" – lavirius Mar 11 '15 at 17:00
  • @LavaRo The structure I listed assumes that c1, c2, c3 as classes of a child element of the `tr`. If they c1, c2, c3 are classes of the tr element - that is when you would use `&` – peterdotjs Mar 11 '15 at 17:31
  • Tue but writing & .c1 seems to have the same effect as what you say because it outputs `parent[space].c1` – lavirius Mar 11 '15 at 17:42
  • @LavaRo although it works I would suggest avoiding that kind of ambiguity. It's harder to read and if the LESS compiler changes it can lead to an error. – peterdotjs Mar 11 '15 at 17:47
0

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.

Aibrean
  • 6,297
  • 1
  • 22
  • 38
  • `:hover` is not a pseudo-element. Also, I don't see what is wrong with the selector. You can definitely style a child element when hovering on the parent. – Harry Mar 11 '15 at 16:37
  • Oh my bad, "psuedo-class". See explanation of order here: http://stackoverflow.com/a/1935823/3739498 – Aibrean Mar 11 '15 at 16:39
  • I think you/me have misunderstood the context mate. How I interpret the question is that OP is trying to style a child based on hover on a parent and that is definitely possible as can be seen [here](http://jsfiddle.net/c8gh4hs1/). In the answer that you have linked both the class and tag name are of the same element and the selector in question was wrong. – Harry Mar 11 '15 at 16:56
  • @harry You are right. We are talking about child classes of `tr` that are active when we hover over that `tr`. Such as `tr>td>div.class` – lavirius Mar 11 '15 at 17:46
  • Well helps that you've posted the HTML outline :) – Aibrean Mar 11 '15 at 19:12
  • It was sort of relevant from the CSS :) `.table tr .c1` does not mean `.table tr.c1`. But the clearer the better, I agree. Thank for all the answers anyway – lavirius Mar 11 '15 at 19:28