Abzüglich: Finding Index der Spalte und Stile anwenden

Ich bin neu in lessAbzüglich: Finding Index der Spalte und Stile anwenden

Was ich versuche zu erreichen, möchte ich eine Klasse th Element geben und dann wollen die td die gleichen Stile für alle gelten mit dem gleichen Index wie der th. Also versuche ich im Grunde, den Index von th herauszufinden, so dass ich :nth-child() für diesen Index verwenden kann.

Ist das mit weniger möglich?

bearbeiten

So versuche ich, so etwas wie dieses

td:nth-child(@index_of_th_with_particular_class) 
{ 

}

Quelle

2016-07-26 Pawan Nogariya

Sie meine Selektoren wie 'th schreiben: n-Kind (1), td: n-te-Kind (1) {color: red; } '? Ich verstehe die Frage nicht ganz. Können Sie vielleicht ein Beispiel für die von Ihnen benötigte Ausgabe hinzufügen? – Harry

@Harry - Ich habe meine Frage von dem, was ich gerade suche, aktualisiert –

Nein, das wäre nicht möglich, weil der Less-Compiler keine Ahnung von Ihrer HTML-Struktur zum Zeitpunkt der Kompilierung haben würde. – Harry

Hoffnung mögen Sie dies bedeuten, zu erreichen, nehmen Sie bitte einen Blick auf die 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>

WENIGER

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; 
     } 
    } 
    } 
}

Quelle

2016-07-28 09:03:26

Abzüglich: Finding Index der Spalte und Stile anwenden

Antwort

Verwandte Themen