如何使用LESS将样式应用于类的侄子元素

Question

I have these elements on the HTML:

 <div id="td-status" class="icongb-cancelled"></div>
 <div class="ticket-header-text">
     <span class="bet-text">TEXT1</span>
     <span>TEXT2</span>
  </div>

and I want to apply a certain style using LESS to TEXT1 ('bet-text' class) whether its uncle has a cercaion class (in this case icongb-cancelled). I'd like to apply it also to TEXT2 (no class). Would it be possible?

I'm using this code, but it doesn't work:

 .icongb_cancelled ~ .ticket-header-text {
     & .bet-text {
         color: #959595;
     }
 }

NOTE: I don't want to use JQuery to add or remove any class. I want to make it just using LESS wihtout any modifying on the HTML.

Thanks in advance.

EDIT: The code was fine, the problem was that I was using an underscore instead of a dash. so you can use that code to apply a style to a nephew element.

Answer 1

You're using .icongb_canceled in the selector, but the class is icongb-canceled .
Dash vs underscore . They need to match.

Answer 2

You can write .icongb-cancelled ~ .ticket-header-text .bet-text , which is valid in CSS, but also is LESS compatible:

 .icongb-cancelled ~ .ticket-header-text .bet-text { color: blue; } .icongb-cancelled ~ .ticket-header-text span { color: green; } 

 <div id="td-status" class="icongb-cancelled"></div> <div class="ticket-header-text"> <span class="bet-text">TEXT1</span> <span>TEXT2</span> </div>