Comment utilisez-vous: Nth-Child () et: Nth-of-Type () Pseudo-Classes?

Comment utilisez-vous: nth-child () et: nth of-type () pseudo-classes?

Les pseudo-classes :nth-child() et :nth-of-type() dans CSS sont utilisées pour sélectionner des éléments en fonction de leur position dans un conteneur parent. Voici un aperçu détaillé de l'utilisation de chacun:

Utilisation: NTH-Child ()

La pseudo-classe :nth-child() sélectionne des éléments en fonction de leur position parmi tous les frères et sœurs au sein du même parent, quel que soit leur type. La syntaxe est:

 <code class="css">:nth-child(an b)</code>

Où a et b sont des entiers, et n est un compteur à partir de 0. Les modèles communs comprennent:

<li> :nth-child(2) : sélectionne le deuxième élément enfant. <li> :nth-child(odd) : Sélectionne tous les éléments de l'enfant à nuages ​​impairs. <li> :nth-child(even) : sélectionne tous les éléments enfants uniformes. <li> :nth-child(3n) : sélectionne chaque troisième élément enfant (3, 6, 9, etc.). <li> :nth-child(3n 1) : Sélectionne chaque troisième élément enfant à partir du premier (1, 4, 7, etc.).

Exemple d'utilisation:

 <code class="html"><ul> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Fourth item</li> </ul></code>

 <code class="css">li:nth-child(2) { background-color: yellow; }</code>

Cela appliquerait un fond jaune au deuxième élément <li> .

Utilisation: n ° de type ()

La pseudo-classe :nth-of-type() est similaire, mais il sélectionne uniquement des éléments en fonction de leur position parmi les frères et sœurs du même type. La syntaxe est identique à :nth-child() :

 <code class="css">:nth-of-type(an b)</code>

Exemple d'utilisation:

 <code class="html"><ul> <li>First item</li> <p>Some text</p> <li>Second item</li> <p>More text</p> </ul></code>

 <code class="css">li:nth-of-type(2) { background-color: yellow; }</code>

Cela appliquerait un fond jaune au deuxième élément <li> , mais n'affecterait pas les éléments <p></p> .

Quelles sont les principales différences entre: nth-child () et: nth of-type () dans CSS?

Les principales différences entre :nth-child() et :nth-of-type() sont:

<li>

Considération de type d'élément:

<li> :nth-child() compte tous les éléments enfants quel que soit leur type. Il considère la position de l'élément parmi tous les frères et sœurs. <li> :nth-of-type() ne compte que les frères et sœurs du même type d'élément. Il est plus spécifique dans sa sélection.
<li>

Précision du sélecteur:

<li> :nth-child() est moins précis si vous ciblez un type d'élément spécifique car il compte tous les éléments. <li> :nth-of-type() vous permet de cibler les éléments plus précisément par type, ce qui peut être plus efficace dans certains scénarios.
<li>

Scénarios d'utilisation:

<li> Utilisation :nth-child() Lorsque vous devez sélectionner des éléments en fonction de leur position parmi tous les frères et sœurs, quel que soit le type. <li> Utilisation :nth-of-type() lorsque vous souhaitez sélectionner des éléments en fonction de leur position parmi les frères et sœurs du même type.

Pouvez-vous fournir des exemples de quand utiliser: nth-child () contre: nth of-type () dans le développement Web?

Utilisation: Nth-Child () Exemple:

Supposons que vous ayez une disposition de grille de différents types d'éléments, et que vous souhaitez styliser chaque troisième élément quel que soit le type d'élément:

 <code class="html"><div class="grid"> <div>Item 1</div> <p>Item 2</p> <span>Item 3</span> <div>Item 4</div> <p>Item 5</p> <span>Item 6</span> </div></code>

 <code class="css">.grid :nth-child(3n) { background-color: lightblue; }</code>

Dans ce cas,: :nth-child(3n) sera stylisé chaque troisième élément (article 3 et article 6) quel que soit leur type d'élément.

Utilisation: nth de type () Exemple:

Si vous souhaitez styliser chaque seconde <div> dans la même mise en page de la grille:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code class=&quot;html&quot;&gt;&lt;div class=&quot;grid&quot;&gt; &lt;div&gt;Item 1&lt;/div&gt; &lt;p&gt;Item 2&lt;/p&gt; &lt;span&gt;Item 3&lt;/span&gt; &lt;div&gt;Item 4&lt;/div&gt; &lt;p&gt;Item 5&lt;/p&gt; &lt;span&gt;Item 6&lt;/span&gt; &lt;div&gt;Item 7&lt;/div&gt; &lt;/div&gt;&lt;/code&gt;</pre><div class="contentsignin">Copier après la connexion</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code class=&quot;css&quot;&gt;.grid div:nth-of-type(2n) { background-color: lightgreen; }&lt;/code&gt;</pre><div class="contentsignin">Copier après la connexion</div></div> <p> Dans cet exemple,: <code>:nth-of-type(2n) sera stylisé chaque seconde <div> (élément 4 et élément 7).<h3> Comment puis-je optimiser mes sélecteurs CSS en utilisant: Nth-Child () et: Nth of-Type () pour de meilleures performances?</h3> <p> Pour optimiser les sélecteurs CSS en utilisant <code>:nth-child() et :nth-of-type() pour de meilleures performances, considérez les stratégies suivantes:

<li>

Spécificité et efficacité du sélecteur:

<li> Utilisation :nth-of-type() au lieu de :nth-child() lorsque vous avez spécifiquement besoin de cibler les éléments d'un type particulier. Cela peut être plus efficace car le navigateur n'a pas besoin de traiter des éléments non liés. <li> Gardez vos sélecteurs aussi spécifiques que nécessaire, mais aussi général que possible pour réduire les frais généraux de correspondance.
<li>

Minimiser la traversée DOM:

<li>

Combinaison :nth-child() ou :nth-of-type() avec des sélecteurs de classe peut aider à réduire la traversée DOM requise. Par exemple:

 <code class="css">.list-item:nth-child(2) { /* Style properties */ }</code>

Cela cible le deuxième enfant avec la classe .list-item , qui peut être plus efficace que la recherche de tous les enfants.

<li>

Évitez la nidification profonde:

<li>

Les sélecteurs profondément imbriqués peuvent ralentir les performances. Utilisation :nth-child() ou :nth-of-type() peut aider à éviter la nécessité de sélecteurs trop spécifiques. Par exemple:

 <code class="css">ul li:nth-child(2) { /* Instead of */ /* ul > li > ul > li:nth-child(2) */</code>

<li>

Limiter la complexité du sélecteur:

<li> Gardez les sélecteurs simples et évitez de combiner trop de pseudo-classes. Par exemple, un seul :nth-child(2) est susceptible de mieux fonctionner qu'une combinaison complexe de sélecteurs de pseudo-classes et d'attributs.
<li>

Utilisez des préprocesseurs CSS:

<li> Les préprocesseurs CSS comme SASS ou moins peuvent vous aider à écrire CSS plus maintenable et efficace. Ils peuvent vous aider à gérer des sélecteurs complexes et à éviter la répétition, conduisant indirectement à de meilleures performances.

En mettant en œuvre ces stratégies, vous pouvez vous assurer que votre utilisation de :nth-child() et :nth-of-type() est optimisée pour les performances.