SASS fournit diverses fonctionnalités sur CSS simple pour écrire du code simple et maintenable, et les sélecteurs avancés en font partie. SASS contient le dernier enfant et le dernier sélecteur de type, dont nous parlerons dans ce tutoriel.
Le sélecteur « dernier enfant » permet aux développeurs de sélectionner le dernier élément d'un élément parent. De plus, il vous permet de sélectionner le dernier élément HTML quel que soit son type. Si le dernier élément contient des éléments enfants imbriqués, il appliquera également le style aux éléments imbriqués puisqu'ils font partie du dernier élément enfant.
Les utilisateurs peuvent utiliser le sélecteur "last-child" en CSS selon la syntaxe suivante.
.element :last-child {
/* CSS code */
}
La syntaxe ci-dessus sélectionnera le dernier élément enfant de l'élément HTML contenant le nom de classe "element".
Dans le fichier index.html, nous avons créé l'élément div « conteneur » et ajouté deux paragraphes et un élément div comme dernier élément enfant.
Dans le fichier SCSS, nous utilisons le sélecteur « last-child » pour sélectionner le dernier élément de l'élément div du conteneur. Dans le résultat, nous pouvons observer que le style a été appliqué à l’élément div enfant.
Nom du fichier – index.html
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>
<h2> Using the <i> :last-child selector </i> in SCSS. </h2>
<div class = "container">
<p> First paragraph </p>
<p> Last paragraph </p>
<div> Not a paragraph but last child. </div>
</div>
</body>
</html>
Nom du fichier – style.scss
.container :last-child {
color: red;
}
Après compilation, le code suivant est généré.
Nom du fichier – style.css
.container :last-child {
color: red;
}
<html>
<head>
<style>
/* style.css obtained from filename – style.scss */
.container :last-child {
color: red;
}
</style>
</head>
<body>
<h2> Using the <i> :last-child selector </i> in SCSS </h2>
<div class = "container">
<p> First paragraph </p>
<p> Last paragraph </p>
<div> Not a paragraph but last child. </div>
</div>
</body>
</html>
Dans l'exemple ci-dessous, nous avons ajouté plusieurs éléments div enfants à l'intérieur de l'élément div parent. De plus, nous avons ajouté plusieurs niveaux d'éléments enfants imbriqués dans le dernier élément div.
Dans le fichier SCSS, nous utilisons le sélecteur de dernier enfant pour sélectionner le dernier élément de l'élément div parent. Dans le résultat, l'utilisateur peut constater que le style est également appliqué aux éléments enfants imbriqués du dernier élément enfant.
Nom du fichier – index.html
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>
<h2> Using the <i> :last-child selector </i> in SCSS. </h2>
<div class = "parent">
<div class = "child"> First </div>
<div class = "child"> Second </div>
<div class = "child"> Third
<div class = "nested-level-1"> Nested Level 1
<div class = "nested-level-2"> Nested Level 2 </div>
</div>
</div>
</div>
</body>
</html>
Nom du fichier – style.scss
.parent :last-child {
font-size: 3rem;
color: green;
font-weight: bold;
}
Après compilation, le code suivant est généré.
Nom du fichier – style.css
.parent :last-child {
font-size: 3rem;
color: green;
font-weight: bold;
}
<html>
<head>
<style>
/* style.css obtained from filename – style.scss */
.parent :last-child {
font-size: 3rem;
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<h2> Using the <i> :last-child selector </i> in SCSS. </h2>
<div class = "parent">
<div class = "child"> First </div>
<div class = "child"> Second </div>
<div class = "child"> Third
<div class = "nested-level-1"> Nested Level 1
<div class = "nested-level-2"> Nested Level 2 </div>
</div>
</div>
</div>
</body>
</html>
Le sélecteur « last-of-type » permet aux développeurs de sélectionner le dernier élément d'un type spécifique au sein d'un élément div parent. Par conséquent, nous devons spécifier le type d'élément à l'aide du sélecteur lors de l'utilisation du sélecteur "last-of-type". Nous pouvons spécifier le type d'élément en utilisant le nom de classe, le nom de balise, le nom d'élément, l'identifiant, etc.
Les utilisateurs peuvent utiliser le sélecteur CSS « dernier type » de SASS selon la syntaxe suivante.
p:last-of-type {
/* CSS code */
}
La syntaxe ci-dessus sélectionne le dernier élément "p" de l'élément parent.
Dans l'exemple ci-dessous, nous avons créé un élément div avec un nom de classe égal à "multiple". Après cela, nous avons inséré deux éléments de paragraphe et un élément div final.
Dans SASS, nous utilisons le sélecteur "last-of-type" pour sélectionner le dernier élément "p" dans un élément "multiple". L'utilisateur peut observer dans le résultat que le style est appliqué au dernier élément "p" même s'il ne s'agit pas du dernier élément enfant.
Nom du fichier – index.html
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>
<h2> Using the <i> :last-of-type selector </i> in SCSS. </h2>
<div class = "multiple">
<p class = "single"> First </p>
<p class = "single"> Second </p>
<div class = "last">
Last element
</div>
</div>
</body>
</html>
Nom du fichier – style.scss
.multiple p:last-of-type {
color: blue;
font-size: 3rem;
}
Après compilation, le code suivant est généré.
Nom du fichier – style.css
.multiple p:last-of-type {
color: blue;
font-size: 3rem;
}
<html>
<head>
<style>
/* style.css obtained from filename – style.scss */
.multiple p:last-of-type {
color: blue;
font-size: 3rem;
}
</style>
</head>
<body>
<h2> Using the <i> :last-of-type selector </i> in SCSS. </h2>
<div class="multiple">
<p class="single"> First </p>
<p class="single"> Second </p>
<div class="last">
Last element
</div>
</div>
</body>
</html>
Dans l'exemple ci-dessous, nous avons créé plusieurs éléments div contenant la classe "fruit". De plus, nous créons le dernier élément div contenant le nom de la classe « bike ».
Dans le code SASS, nous utilisons le sélecteur ".fruit :last-of-type" pour sélectionner le dernier élément contenant le nom de la classe "fruit". Dans la sortie, l'utilisateur peut observer qu'il stylise l'avant-dernier élément div, qui est le dernier élément contenant le nom de classe « fruit ».
Nom du fichier – index.html
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>
<h2> Using the <i> :last-of-type selector </i> in SCSS. </h2>
<div class = "fruit">
Apple
</div>
<div class = "fruit">
<ul>
<li> Banana </li>
<li> Orange </li>
<li> Watermelon </li>
</ul>
</div>
<div class = "bike">
This is bike div.
</div>
</body>
</html>
Nom du fichier – style.scss
.fruit :last-of-type {
background-color: orange;
color: white;
font-size: 2rem;
}
Après compilation, le code suivant est généré.
Nom du fichier – style.css
.fruit :last-of-type {
background-color: orange;
color: white;
font-size: 2rem;
}
<html>
<head>
<style>
/* style.css obtained from filename – style.scss */
.fruit :last-of-type {
background-color: orange;
color: white;
font-size: 2rem;
}
</style>
</head>
<body>
<h2> Using the <i> :last-of-type selector </i> in SCSS. </h2>
<div class="fruit">
Apple
</div>
<div class="fruit">
<ul>
<li> Banana </li>
<li> Orange </li>
<li> Watermelon </li>
</ul>
</div>
<div class="bike">
This is bike div.
</div>
</body>
</html>
L'utilisateur a appris à utiliser les sélecteurs "last-child" et "last-of-type" dans SASS. Le sélecteur "last-child" est utilisé pour sélectionner le dernier élément de l'élément parent dans toutes les conditions. L'élément 'last-of-type' est utilisé pour sélectionner le dernier élément enfant d'un type spécifique au sein de l'élément parent.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
