:nth-last-col

Experimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La pseudo-classe CSS :nth-last-col() est conçue pour les tableaux et les grilles. Elle accepte les notations de type An+B telles qu'utilisées avec le sélecteur :nth-child, ce qui permet de cibler plusieurs colonnes en comptant à partir de la fin du jeu de colonnes. Les valeurs odd et even sont aussi valides.

/* Sélectionne toutes les valeurs impaires du tableau */
:nth-last-col(odd) {
  background-color: pink;
}

Syntaxe

La pseudo-classe nth-last-col est spécifiée avec un argument unique qui représente le motif utilisé pour faire la correspondance des éléments.

Voir :nth-child pour une explication plus détaillée de cette syntaxe.

Syntaxe formelle

Error: could not find syntax for this item

Exemples

Exemple basique

HTML

<table>
  <tr>
    <td>un</td>
    <td>deux</td>
    <td>trois</td>
    <td>quatre</td>
  </tr>
  <tr>
    <td>un</td>
    <td>deux</td>
    <td>trois</td>
    <td>quatre</td>
  </tr>
</table>

CSS

td {
  border: 1px solid #ccc;
  padding: .2em;
}

/* Colonnes impaires, en commençant par la colonne finale du tableau */
:nth-last-col(2n+1) {
  background-color: pink;
}

Résultat

Spécifications

No specification found

No specification data found for css.selectors.nth-last-col.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi