Tout sélectionner sauf le premier et le dernier élément td dans un sélecteur

J'ai écrit quelque chose comme ceci dans le CSS:

tr.red > td:not(:last-of-type):not(:first-of-type)
{
    color: #E53B2C;
    border-bottom: 4px solid #E53B2C;
}

J'essaie de l'appliquer à des cellules de tableau, qui ne sont pas d'abord et non pas le dernier dans la ligne avec .red classe.

Il semble fonctionner comme prévu, mais est-ce vraiment la bonne façon de le faire?

source d'informationauteur Kamil

  1. 3

    Il est syntaxiquement correct, comme vous pouvez rapidement vérifier à l'aide de la Validateur CSS du W3C. Le validateur est connu pour avoir des erreurs, donc, en principe, vous devez vérifier que la règle contre spécifications CSS, en particulier Les Sélecteurs De Niveau 3. Le résultat est toujours que oui, c'est correct.

    Il a aussi le sens désiré, puisque c'est la façon dont les sélecteurs de combiner. Vous pouvez utiliser :not(...) sélecteurs pour exprimer une condition de type “non ... non ...”.

    Cela s'applique à condition que tous les enfants de tr éléments sont td. Si il y a des cellules d'en-tête, c'est à dire th éléments, le sélecteur s'applique à ces cellules de données (td éléments) qui ne sont pas de la première cellule de données ou la dernière cellule d'une ligne avec .red classe.

  2. 10

    Peut-être que ce serait aider 

    tr.red  td:not(:first-child):not(:last-child)
{
//your styles
}

    L'échantillon

  3. 6

    Comme certains l'ont dit, td:first-of-type vous donne premier TD, td en cas:d'abord l'enfant sélectionne le premier élément enfant de tR si c'est de la TD. Cela signifie, votre code ne sera pas vous donner toutes les cellules qui ne sont pas en premier ou en dernier, si vous avez des TH.

    tr.red > *:not(:last-child):not(:first-child)
    { /* ... your css code ... */ }

    Je pense que cela doit fonctionner de cette façon. Même si vous voulais avoir des code distinct pour la TH et TD, vous pouvez le faire comme th:not(:first-child) et td:not(:first-child). Votre code serait mieux lorsque vous voulez trouver le premier élément avec quelques nom de la balise, comme p:first-of-type et lui donner un certain style différent.