sélectionnez plusieurs enfants dans css

Je suis en train d'appliquer les points de suspension de la classe dans le css pour une table.
Donc il y a des colonnes doivent avoir ce bouton de sélection de la classe. J'ai plusieurs colonnes dans une table.

Je fais cela par nth-child propriété en css, Est-il un autre moyen de sélectionner aléatoire de plusieurs enfants?

J'ai essayé-

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

Même si la table a une plus de colonne 5th-childmaintenant, pour cet enfant, j'ai besoin de faire une classe distincte, donc pour les autres colonnes.

Je ne veux pas développer mon code css.
Est-il une autre solution?

source d'informationauteur Manoz

  1. 23

    Vous pouvez séparer les classes avec une virgule ,

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

    Note: Vous devez vérifier la nth-child et de définir manuellement dans votre feuille de style, CSS ne peut pas décider pour vous si les colonnes d'augmenter.

    Si vous utilisez un langage côté serveur pour générer une dynamique de la table, vous pouvez utiliser des fonctions comme substr() de couper le bas des lettres.

    Côté remarque : Vous n'avez pas à utiliser > à moins que et jusqu'à ce que vous n'avez pas de table d'enfant, c'est suffisant.. tbody tr td:nth-child(3)

  2. 4

    Cela devrait le faire:

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

    À l'aide d'une virgule entre un sélecteur comme ceci permet d'avoir plusieurs sélecteurs en utilisant le même style déclarée. Vous pouvez avoir autant d'séparées par des virgules sélecteurs que vous souhaitez autoriser d'autres éléments à utiliser le même style.

    Je pourrais ajouter que, sauf si vous avez un conflit dans le style de la page, à l'aide de .ListTaskTime tbody tr > td:nth-child(3) a est assez spécifique et peut être simplifié à quelque chose comme .ListTaskTime td:nth-child(3) a.

    Vous pouvez également être intéressé de savoir sur :nth-child(even) et :nth-child(odd) ou encore plus complexe nth-child pseudo-sélecteurs comme :nth-child(2n+3) qui peut vous aider si il y a plus de colonnes plus tard, qui correspondent à un motif de style.

  3. 1

    pas tout à fait sûr de ce que tu veux dire par "application de la classe par le choix de la classe", mais je vois que vous aimeriez un sélecteur css chaîne de coeur.

    si, par cette 5ème enfant de la colonne(?) avoir besoin d'une autre classe que tu veux dire tous les autres, mais que l'enfant dans le tableau a la propriété de text-overflow: ellipsisalors ce serait un court trajet alternatif.

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

    (chose bizarre, si l'classés objet est un <p>ce sélecteur de chaîne ne fonctionne pas comme <div> il n'..)

    On peut aussi utiliser tr>:nth-child() également la cible de tous les objets partageant le même espace que <td>. tous les autres capricieux bits (plusieurs requêtes, etc) ont été décrites soigneusement par les autres. Désolé de dire que quand vous avez deux formats différents dans un tableau, il est à peu près impossible de spécifier à la fois dans un seul sélecteur dans la plaine du css..pour l'instant? 😉