複数の子をCSSで選択

Question

私はテーブルのcssに省略記号クラスを適用しようとしています。 したがって、この省略記号クラスが必要な列があります。テーブルに複数の列があります。

私はこれをCSSでnth-childのプロパティで行っていますが、複数の子供をランダムに選択する方法はありますか？

私は

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

をtried-同じテーブルが1つの以上の列5th-childがありますが、今、この子のために、私は、したがって、他の列のために、別のクラスを作成する必要があります。

私のCSSコードを拡張したくありません。 他に解決策はありますか？

Answer 1

あなたはカンマを持つクラス,

.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 */ 
} 

注意を分離することができます：あなたはnth-childをチェックして、列が増加した場合、CSSはあなたのためにそれを決めることができないとして、自分のスタイルシートで手動で定義する必要があります。

動的表を生成するためにサーバー側言語を使用する場合は、substr()などの機能を使用して文字を切り取ることができます。

サイドノート：あなたがない限り>を使用する必要はありません、あなたはどの子テーブルを持っていないまで、これで十分です..あなたは「クラスを選択することで、クラスを適用することによって、何を意味するかtbody tr td:nth-child(3)

Answer 2

これはそれを行う必要があります。

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

をこのようなセレクタの間にカンマを使用して、あなたが宣言した同じスタイルを使用して複数のセレクタを持つことができます。カンマで区切られたセレクタを、カンマで区切って複数の要素で同じスタイリングを使用できるようにすることができます。

ページに矛盾するスタイリングがない限り、.ListTaskTime tbody tr > td:nth-child(3) aを使用するとかなり具体的で、.ListTaskTime td:nth-child(3) aのように簡略化できます。

また、より多くの列がスタイリングするパターンに合うように、後がある場合は、あなたを助けるかもしれない:nth-child(2n+3)ような程度:nth-child(even)と:nth-child(odd)またはより複雑なnth-child擬似セレクタを知って興味があるかもしれません。

Answer 3

はかなり確実ではありません"しかし、私はあなたが基本的にCSSのセレクタの文字列をしたいと思う参照してください。

異なるクラスを必要とするその5番目の子の列（？）では、他のすべてのものを意味しますが、テーブル内のその子がその中にtext-overflow: ellipsisというプロパティを持つ場合、これは短い代替方法になります。

.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*/} 

（奇妙なこと、分類対象は<p>、それがない<div>として..かかわらず、その特定のセレクタ文字列が動作しない場合）

一つもまた、すべてのオブジェクトをターゲットにtr>:nth-child()を使用することができます<td>と同じスペースを共有します。他のすべての厄介なビット（複数のクエリなど）は、他の人によってきれいに概説されています。申し訳ありませんが、テーブルに2つの異なるフォーマットがある場合、それらを両方とも単純なcssの単一のセレクタで指定することは不可能です。 ;）