Минус: Нахождение индекса столбца и применить стили

Я новичок в lessМинус: Нахождение индекса столбца и применить стили

То, что я пытаюсь достичь, я хочу, чтобы дать класс th элемента, а затем хотите применить те же стили для всех в td имеющий тот же индекс, что и th. Поэтому в основном я пытаюсь выяснить индекс th, чтобы я мог использовать :nth-child() для этого индекса.

Возможно ли это с меньшим количеством?

Редактировать

Так что я пытаюсь добиться чего-то вроде этого

td:nth-child(@index_of_th_with_particular_class) 
{ 

}

источник

2016-07-26 Pawan Nogariya

Вы имеете в виду написание селекторов, как 'е: п-го ребенка (1), тд: п-го ребенка (1) {цвет: красный; } '? Я не совсем понимаю вопрос. Можете ли вы добавить пример того, какой результат вам нужен? – Harry

@Harry - Я обновил свой вопрос о том, что я точно ищу –

Нет, это было бы невозможно, потому что компилятор Less не имел бы представления о вашей структуре HTML во время компиляции. – Harry

Надежда вы имеете в виду, как это, пожалуйста, посмотрите на sample pen

CSS & HTML

table { 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    padding: 5px; 
 
    border: 1px solid #ddd; 
 
} 
 
tr:nth-child(3) td { 
 
    background: yellow; 
 
} 
 
tr:nth-child(4) td:nth-child(5) { 
 
    background: red; 
 
}

<div> 
 
    <table> 
 
     <thead></thead> 
 
     <tbody> 
 
      <tr> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
       <td>Test data</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

МЕНЬШЕ

table { 
    border-collapse: collapse; 
} 
td { 
    padding: 5px; 
    border: 1px solid #ddd; 
} 
tr { 
    &:nth-child(3) { 
    td { 
     background: yellow; 
    } 
    } 
    &:nth-child(4) { 
    td { 
     &:nth-child(5) { 
     background: red; 
     } 
    } 
    } 
}

источник

2016-07-28 09:03:26

Минус: Нахождение индекса столбца и применить стили

ответ

Смежные вопросы