English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:nth-dernier-of-type(an+b) Ce pseudo-classe CSS correspond à ceux qui ont un an+b-1 éléments frères de même type, où n est un nombre positif ou nul. Il est essentiellement comparable à :nth-of-type comme celui-ci, mais il compte à partir de la fin, plutôt qu'à partir du début.
Guide complet des sélecteurs CSS
donner le dernier2remplir le fond de couleur pour les éléments de type span :
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Base tutorial(oldtoolbag.com)</title>
<style>
span:nth-dernier-of-type(2) {
background-color: vert lime;
}
</style>
</head>
<body>
<div>
<span>C'est une portée.</span>
<span>C'est une autre portée.</span>
<em>Mise en valeur.</em>
<span>Oh, cette portée devient floue !</span>
<strike>Cela a été supprimé.</strike>
<span>C'est la dernière portée.</span>
</div>
</body>
</html>Voyons si ça marche ‹/›:nth-dernier-of-type( <nth> ) où <nth> = <an-plus-b> | even | odd
:nth-dernier-of-type(n)sélecteur correspond à l'élément frère nth du même type.
n Peut être un nombre, un mot-clé ou une formule.
Indication:Veuillez consulter::nth-dernier-child()sélecteur. Ce sélecteur correspond à l'élément enfant structurel nth dans l'élément parent
Les numéros dans le tableau représentent la version du premier navigateur prenant en charge cette propriété.
| sélecteur | |||||
|---|---|---|---|---|---|
| :nth-dernier-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Les nombres impairs et pairs peuvent être utilisés comme mots-clés pour correspondre aux éléments enfants, dont l'index est impair ou pair.
Ici, nous assignons deux couleurs de fond différentes pour les éléments p à inversion impaire et pair :
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Base tutorial(oldtoolbag.com)</title>
<style>
p:nth-dernier-of-type(odd)
{
background:#ff0000;
}
p:nth-dernier-of-type(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<div>
<p>C'est le premier paragraphe.</p>
<p>C'est le deuxième paragraphe.</p>
<p>C'est le troisième paragraphe.</p>
<p>C'est le quatrième paragraphe.</p>
</div>
</body>
</html>Voyons si ça marche ‹/›Utilisez l'équation (an+ b) Description : a représente la taille d'une boucle, N est un compteur (commençant à 0) et b est un décalage.
Ici, nous assignons une couleur de fond pour tous les indices3des éléments p spécifiés en ordre décroissant de leur multiplicité sont assignés une couleur de fond :
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Base tutorial(oldtoolbag.com)</title>
<style>
p:nth-dernier-of-type(3n+0)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>C'est un titre</h1>
<p>Le premier paragraphe.</p>
<p>Le deuxième paragraphe.</p>
<p>Le troisième paragraphe.</p>
<p>Le quatrième paragraphe.</p>
<p>Le cinquième paragraphe.</p>
<p>Le sixième paragraphe.</p>
<p>Le septième paragraphe.</p>
<p>Le huitième paragraphe.</p>
<p>Le neuvième paragraphe.</p>
<p><b>Attention :</b> Internet Explorer 8 et les versions de navigateurs plus anciennes ne prennent pas en charge :nth-dernier-sélecteur child().</p>
</body>
</html>Voyons si ça marche ‹/›