CODEWITHSUNDEEP
htmlcssless
Khanon
Khanon

Reputation: 225

How can I apply a style using LESS to a nephew element of a class

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.

Upvotes: 1

Views: 516

Answers (2)

tao
tao

Reputation: 90217

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

Upvotes: 1

GolezTrol
GolezTrol

Reputation: 116160

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>

Upvotes: 1

Related Questions