Créer des styles et des mises en page spécifiques à la quantité spécifique à CSS

Sep 17, 2025

Comment

[dix] [dix] [dix]

[dix]

Dans ce tutoriel, nous examinerons les moyens de modifier les styles d'éléments du CSS, ainsi que semblant coiffer leurs parents, en fonction du nombre d'éléments. Nous verrons également comment changer la mise en page des éléments en fonction de leur quantité, afin de créer un plus adaptatif mise en page cela fait une meilleure utilisation de l'espace.

[dix]

Astuces CSS pour révolutionner vos mises en page Web

Enfin, nous couvrirons l'utilisation de compteurs CSS pour afficher l'indice d'un élément dans un ensemble à l'intérieur, ainsi que l'affichage du nombre total de comptes à l'intérieur du parent. Tout cela sera réalisé avec Pure CSS uniquement, sans la nécessité de JavaScript ou de cadres, conduisant à un code simple et plus efficace.

Pour construire un site sans avoir besoin de code sans fin, vous aurez besoin d'un Générateur de site Web . Et quels que soient les capacités de votre site, assurez-vous de votre hébergement Web Le service est adapté à des fins. Pour quelque chose de différent, obtenez votre stockage en ligne jusqu'à zéro.

Sélecteurs à un seul élément

CSS3 n'a qu'une seule paire de sélecteurs pouvant déterminer la quantité d'éléments, à savoir l'enfant seulement et les sélecteurs de type seulement. Cela dit, ils ne peuvent vraiment pas déterminer si un élément est seul ou a des frères et sœurs. Le SELECTEUR SEUL-ENFANT correspond à des éléments qui sont le seul enfant de leur parent, tandis que: Seulement de type correspond aux éléments qui sont les seuls de leur type.

Malheureusement, c'est aussi loin que des sélecteurs simples, mais quelques autres sélecteurs peuvent cibler des éléments basés sur leur commande dans un ensemble d'éléments similaires. Ce sont: Nth-enfant,: Nth-of-Type, Nth-Last-Child et Nième-Derniers de type, qui sont généralement utilisés pour cibler des éléments basés sur leur commande dans un ensemble d'éléments similaires. Les sélectionneurs: Nth-Last-Fille et Nth-Last-Type Selectors sont utilisés pour déterminer l'ordre des éléments comptant à l'envers à partir du dernier élément au premier. La combinaison avec d'autres sélecteurs nous permet de créer des chaînes plus complexes qui ciblent des éléments spécifiques basés sur leur quantité.

[dix]

Chaînes de sélecteur spécifiques à la quantité

selector chains — Sélecteur: premier de type: Nth-dernier de type (3) et la combinaison générale de sodiblon ~ peut être combinée pour cibler le premier des trois et tous ses frères et sœurs, d'où dans un ensemble de trois

Parmi les quatre sélecteurs susmentionnés, le principal que nous utiliserons dans ce didacticiel est le dernier de type. La différence entre cela et le sélecteur de Nth-last-enfant est que ce dernier inclut tous les frères d'appui des éléments dans l'ensemble, tandis que le premier inclut uniquement des éléments du même type HTML et est donc plus sélectif. Pour le reste de ce tutoriel, nous utiliserons les sélecteurs de type-de type, mais les variantes -CHILD sont également valables.

Le nième de type de type peut être utilisé avec les sélecteurs les plus populaires de type de type pour créer une chaîne qui cible le premier élément dans un ensemble de quantité souhaitée. Par exemple, nous pouvons utiliser: premier de type: Nth-dernier de type (3) aux éléments cibles qui sont à la fois les premier et troisième de la fin de leur type ou, autrement dit, le premier d'un ensemble de trois. Nous pouvons ensuite l'étendre avec le combinateur général de la soeur ~ pour sélectionner tous les frères et sœurs suivant le premier d'un ensemble de trois. Combinant ces deux chaînes de sélecteur, nous pouvons créer un sélecteur complexe qui cible les éléments qui sont les premiers de trois et tous les éléments du même type qui le suivent, sélectionnant ainsi tous les éléments d'un ensemble de trois.

 .Box: premier de type: Nth-dernier de type (3),
.BOX: premier de type: Nth-dernier de type (3) ~ .BOX

Cette chaîne de sélecteur fonctionne non seulement pour un nombre spécifique d'éléments mais peut même être modifié pour cibler une gamme de quantités.

selector chain — Sélecteurs Nth-Last-of-Type (N + 2) et: NTH-Last-of-Type (-N + 2) peut être utilisé pour cibler des éléments dans des ensembles de plus de deux respectivement.

[dix]

Si nous voulons cibler des éléments dans un ensemble de plus ou moins qu'une valeur particulière m, nous pouvons utiliser la chaîne avec les techniques (N + M) et (-N + m) respectivement. Par exemple, pour cibler tous les éléments dans un ensemble de deux éléments ou plus, nous pouvons utiliser:

 .BOX: premier de type: Nth-dernier de type (N + 2),
.BOX: premier de type: Nth-dernier de type (N + 2) ~ .BOX

De même, nous pouvons cibler tous les éléments dans un ensemble de deux éléments ou moins en utilisant:

 .Box: premier de type: Nth-dernier de type (-N + 2),
.BOX: premier de type: Nth-dernier de type (-N + 2) ~ .BOX

Comme vous pouvez le constater, il s'agit d'une puissante chaîne de sélecteur qui nous permet d'obtenir des choses très intéressantes et utiles sans avoir besoin de JavaScript ou d'autres cadres. Il est particulièrement utile en matière de création de dispositions adaptatives qui changent en fonction du nombre d'éléments.

Dispositions dynamiques et spécifiques à la quantité

grid layouts with odd and even numbers — Pour un nombre pair d'éléments, des dispositions de grille sont superbes, mais pas autant pour les nombres impairs

Disons que nous voulons afficher un groupe de cases qui montrent les résultats d'une recherche ou d'un appel d'API dans une présentation de la grille à deux colonnes. Le problème réside dans le fait que les résultats proviennent d'une source externe et que nous n'avons aucun moyen de connaître le nombre de résultats qui seront retournés, nous ne savons donc pas combien de boîtes seront créées. Bien que la grille ait fière allure pour un nombre pair de boîtes, lorsqu'il est appliqué à un nombre impair, la dernière boîte se trouve sur une rangée seule et regarde ... bien, genre d'impair.

Ceci est particulièrement problématique lorsque vous utilisez des éléments Flexbox avec une croissance flexible appliquée, car il provoque la croissance du dernier élément dans l'espace vide de la rangée, prenant ainsi la largeur complète. Une façon d'empêcher cela pourrait être de faire le premier nombre d'un nombre impair de boîtes à prendre une ligne complète en appliquant une largeur de 100% aux premières cases qui sont également un nombre impair de boîtes à partir de la fin, en utilisant: premier enfant: Nth-dernier de type (impair). Cela fournit une meilleure mise en page car elle donne la première et donc la plus pertinente ou la récente résultat plus importante que la dernière.

Nous pouvons même ajouter un cas particulier pour le moment où la quantité est divisible par trois utilise: premier enfant: Nth-dernier de type (3n) pour transformer la grille en une disposition à trois colonnes en appliquant une largeur de 33% à la première. boîtes dans un ensemble avec une quantité divisible par trois et toutes les cases qui le suivent.

 .BOX {
  largeur: 50%;
}

.BOX: First-Enfant: Nth-dernier de type (impair) {
  largeur: 100%;
}

.BOX: Premier-enfant: Nth-dernier de type (3n),
.BOX: Premier-enfant: Nth-dernier de type (3N) ~ .BOX {
  largeur: 33%;
}

Conclusion

different layouts — Les présentations peuvent être modifiées en fonction du nombre d'éléments simplement en utilisant des chaînes de sélecteur CSS

Comme nous l'avons vu, les sélecteurs CSS peuvent être enchaînés de différentes manières intéressantes afin d'appliquer des styles et des dispositions adaptatives qui changent en fonction de la quantité d'éléments. Les chaînes de sélecteur peuvent également être utilisées pour appliquer des styles apparemment appliqués au parent d'un ensemble d'éléments d'une certaine quantité, à l'aide de :: avant ou :: après des pseudo-éléments positionnés pour prendre la taille de la société mère. Combinée à des compteurs CSS, ces pseudo-éléments peuvent être utilisés pour afficher le nombre total de descendants dans un élément parent, ainsi que du texte qui change en fonction de la quantité de descendants.

Ces techniques offrent un moyen précieux de créer des styles et des dispositions dynamiques et basés sur la quantité utiles lors de la manipulation d'un nombre inconnu d'éléments, ce qui est souvent le cas lorsqu'il s'agit d'API.

Cet article a été publié à l'origine dans le numéro 308 de rapporter , le magazine le plus vendu au monde pour les concepteurs et les développeurs Web. Achetez le numéro 308 ici ou S'abonner ici .

Articles Liés:

5 conseils pour CSS Super-Fast
Créer une mise en page réactive avec la grille CSS
Comprendre la propriété d'affichage CSS

[dix] [dix]

[dix]

Créer des styles et des mises en page spécifiques à la quantité spécifique à CSS

Sélecteurs à un seul élément

Chaînes de sélecteur spécifiques à la quantité

Dispositions dynamiques et spécifiques à la quantité

Conclusion

Comment - Most Popular Articles

Faites votre propre stylet avec seulement 4 articles ménagers (sérieusement)

Comment dessiner Asuka de Nonon Genesis Evangelion

Dessine une geisha Bad-Ass

3 conseils pour créer un superbe matériel promotionnel d'impression

Comment utiliser Adobe Capture CC

Construire une application de conception de matériaux avec angulaire 2

Comment maîtriser l'art du fan 3D

Comment obtenir votre modèle de zbrush en maya

Catégories