wählen Sie mehrere Kind in CSS

Question

Ich versuche, Ellipse-Klasse in CSS für eine Tabelle anzuwenden. So gibt es einige Spalten müssen diese Ellipse Klasse haben. Ich habe mehrere Spalten in einer Tabelle.

Ich mache das von nth-child Eigentum in css, gibt es irgendeine andere Möglichkeit, zufällig mehrere Kind auszuwählen?

I tried-

.ListTaskTime tbody tr >td:nth-child(3) a 
{ 
     text-overflow: ellipsis; 
    width:150px; 
    display: block; 
    overflow: hidden; 
    word-break:keep-all; 
    zoom:normal; 
    line-break:normal; 
    white-space:pre; 
} 

Obwohl selber Tisch eine für dieses Kind mehr Spalte 5th-child, jetzt hat ich brauche eine eigene Klasse zu machen, damit für die anderen Spalten.

Ich möchte meinen CSS-Code nicht erweitern. Gibt es eine andere Lösung?

Answer 1

können Sie die Klassen trennen mit einem Komma ,

.ListTaskTime tbody tr >td:nth-child(3), 
.ListTaskTime tbody tr >td:nth-child(6), 
.ListTaskTime tbody tr >td:nth-child(9) { 
    /* Common Styles Goes Here, Styles will apply to child 3,6 and 9 */ 
} 

Hinweis: Sie müssen die nth-child und definieren Sie es manuell in Ihrem Stylesheet überprüfen, da CSS es für Sie nicht entscheiden können, ob Spalten erhöhen. Wenn Sie eine serverseitige Sprache zum Generieren einer dynamischen Tabelle verwenden, können Sie Funktionen wie substr() verwenden, um die Buchstaben zu reduzieren.

Randbemerkung: Sie haben nicht > zu verwenden, solange Sie keine untergeordnete Tabelle haben, dies ausreichend ist .. tbody tr td:nth-child(3)

Answer 2

Dies sollte es tun:

.ListTaskTime tbody tr > td:nth-child(3) a, 
.ListTaskTime tbody tr > td:nth-child(5) a 
{ 
    text-overflow: ellipsis; 
    width:150px; 
    display: block; 
    overflow: hidden; 
    word-break:keep-all; 
    zoom:normal; 
    line-break:normal; 
    white-space:pre; 
} 

ein Komma zwischen einem Selektor wie diese können Sie erklärten mehrere Selektoren mit dem gleichen Styling haben. Sie können beliebig viele durch Kommas getrennte Selektoren verwenden, um mehr Elementen die Verwendung des gleichen Stylings zu ermöglichen.

Ich könnte hinzufügen, dass, wenn Sie widersprüchliche Styling auf der Seite haben, .ListTaskTime tbody tr > td:nth-child(3) a ist ziemlich spezifisch und könnte zu etwas wie .ListTaskTime td:nth-child(3) a vereinfacht werden.

Sie könnten auch interessiert sein über :nth-child(even) und :nth-child(odd) oder noch komplexere nth-child Pseudo-Selektoren wie :nth-child(2n+3) zu wissen, die Ihnen helfen können, wenn es mehr Spalten später ist, die ein Muster seinem Stil passen.

Answer 3

nicht ganz sicher, was Sie unter „Anwendung Klasse bedeuten nach Klasse Auswahl "aber ich sehe, dass Sie im Grunde eine Css-Selektor-Zeichenfolge möchten.

Wenn von dieser 5th-Child-Spalte (?) Eine andere Klasse benötigt wird, meinen Sie alle anderen, aber dieses Kind in der Tabelle hat die Eigenschaft text-overflow: ellipsis drin, dann wäre dies ein kurzer alternativer Weg.

.ListTaskTime td:not(:nth-of-type(5)) a{ 
     /*styles for ellipse goes here*/} 
    .ListTaskTime td:nth-of-type(5) a{ 
     /*styles for not-ellipse goes here*/} 

(seltsame Sache, wenn das Objekt eingestuft ist ein <p>, dass bestimmte Selektor-String nicht funktioniert, obwohl als <div> es tut ..)

One auch tr>:nth-child() nutzen könnten, um auch alle Zielobjekte teilen Sie den gleichen Speicherplatz wie <td>. Alle anderen kniffligen Bits (mehrere Abfragen usw.) wurden von anderen sauber umrissen.Es tut mir leid zu sagen, dass wenn Sie zwei verschiedene Formate in einer Tabelle haben, es ziemlich unmöglich ist, sie beide in einem einzelnen Selektor in einfachem CSS zu spezifizieren ... für jetzt? ;)