Les feuilles de style en cascade (CSS) vous permettent de créer des effets fantastiques si vous disposez des compétences nécessaires. Cependant, il y a tellement d’éléments que vous pouvez personnaliser que la maîtrise de ce langage peut être difficile.
Prenez les règles CSS even et odd, par exemple. Il s’agit de sélecteurs peu connus qui vous permettent de cibler les éléments pairs et impairs sur les tableaux, les listes et à peu près tout ce à quoi vous pouvez penser. Dans cet article, nous allons vous expliquer comment fonctionnent les règles paires et impaires de CSS et comment vous pouvez les utiliser. Nous vous apprendrons ensuite comment utiliser Divi pour reproduire leurs effets et obtenir des résultats encore meilleurs. Mettons-nous au travail !
Introduction aux règles paires et impaires de CSS
Les règles paires et impaires de CSS vous permettent de cibler des éléments très spécifiques.
Le nom de ce type de sélecteur CSS en dit long sur son utilité. Les règles paires et impaires vous permettent de cibler ces deux types d’éléments dans presque toutes les situations et de leur appliquer des styles.
Prenez l’exemple en haut de cette section : les colonnes paires partagent toutes la même couleur de texte, tandis que les numéros impairs en utilisent une autre. Cet effet est possible parce que nous avons utilisé des sélecteurs pairs et impairs pour cibler chaque type d’élément et leur appliquer des couleurs de fond uniques.
À l’heure actuelle, vous êtes probablement curieux de savoir quelles pourraient être les applications de ces sélecteurs spécifiques, aussi allons-nous les détailler à l’aide d’exemples :
- Tableaux de prix. Les meilleurs tableaux de prix utilisent des couleurs pour attirer votre regard vers les plans auxquels ils veulent vous faire souscrire. Dans ce cas, vous pourriez utiliser des sélecteurs pairs et impairs pour faire ressortir les plans spécifiques.
- Pour rendre les ensembles de données étendus plus lisibles. Imaginez que vous essayez de donner un sens à un long tableau rempli de données. Avec un peu de CSS, vous pouvez appliquer des règles paires et impaires pour créer un contraste entre les lignes ou les colonnes et rendre les choses plus lisibles.
- Pour mettre en évidence des éléments spécifiques dans une liste. Si vous incluez une longue liste dans un article, les règles paires et impaires peuvent s’avérer utiles pour mettre en évidence des entrées particulières. Au lieu de jouer avec les couleurs d’arrière-plan, vous pouvez mettre en gras certains éléments, modifier la taille de leur police, etc.
Pour être honnête, les règles paires et impaires de CSS ne sont pas quelque chose que l’on voit souvent dans la nature. Cependant, elles sont faciles à appliquer et il n’y a aucune raison pour qu’elles ne fassent pas partie de votre arsenal. Voyons comment les mettre en pratique !
Comment les règles paires et impaires de CSS fonctionnent en pratique
Les tableaux constituent le cas d’utilisation le plus courant des règles paires et impaires de CSS, car ce sont des éléments dont les limites visuelles sont claires. De plus, les tableaux sont généralement composés de plusieurs éléments, ce qui en fait des candidats parfaits pour les sélecteurs en question.
Voici un exemple de tableau rapide et sale auquel on a appliqué un style minimal. Il est facile à lire et transmet les informations nécessaires, mais c’est à peu près tout :
Si nous voulions lui appliquer des règles paires et impaires, voici un exemple de ce que donnerait le CSS :
tr:nth-child(even) {background : #CCC}
tr:nth-child(odd) {background : #4D4D4D}
Ici, tr fait référence aux éléments HTML de chaque ligne de votre tableau. Le code ci-dessus définira des arrière-plans blancs pour toutes les lignes paires et gris pour les numéros impairs, comme ceci :
Dans cet exemple, la cellule verte dans le coin de l’image est simplement mise en évidence.
Vous pouvez également cibler des colonnes au lieu de lignes, ce qui est pratique pour mettre en évidence les plans uniques dans les tableaux de prix. Voici le même code que précédemment, mais avec des colonnes au lieu de lignes :
col:nth-child(even) {background : #CCC}
col:nth-child(odd) {background : #4D4D4D}
Voici à quoi ressemblerait le résultat :
Comme nous l’avons mentionné précédemment, vous pouvez utiliser les règles paires et impaires pour cibler pratiquement n’importe quel élément. L’essentiel est qu’il contienne des sous-éléments, comme des lignes ou des colonnes, sinon le sélecteur ne saura pas lesquels cibler. Les listes, par exemple, comprennent des éléments HTML li pour chaque entrée. En voici un exemple :
- Premier élément.
- Deuxième élément.
- Troisième élément.
- Quatrième élément.
Dans ce cas, vous voulez que vos sélecteurs pair et impair ciblent spécifiquement les éléments li , donc votre CSS devrait ressembler à ceci :
li:nth-child(even) {background : #CCC}
li:nth-child(odd) {background : #4D4D4D}
Bien sûr, l’ajout de couleurs d’arrière-plan aux éléments de liste n’est pas une pratique courante, et vous voudrez probablement utiliser d’autres types de personnalisation. Par exemple, vous pouvez mettre en gras les éléments impairs de votre liste pour les faire ressortir :
- Premier élément.
- Deuxième élément.
- Troisième élément.
- Quatrième élément.
Comme vous pouvez le constater, il n’y a aucune astuce pour utiliser les sélecteurs pairs et impairs. Il suffit de cibler les bons éléments, et vous pouvez apporter les modifications que vous souhaitez sans affecter le reste de votre page.
Comment reproduire les règles paires et impaires CSS à l’aide de Divi
Si vous êtes un utilisateur de Divi, le système de modules vous permet d’ajouter en quelques clics des éléments sophistiqués tels que des formulaires de contact, des tableaux de prix, des galeries, etc. à n’importe laquelle de vos pages. De plus, vous avez accès à de puissantes fonctions de personnalisation de ces éléments.
En ce qui concerne les tableaux de prix, par exemple, il est très facile de reproduire les effets des règles paires et impaires CSS sans utiliser de code grâce à Divi. Voici un exemple de tableau de prix rudimentaire que nous avons créé à l’aide de Divi Builder :
Imaginons maintenant que nous voulions appliquer des couleurs différentes à chaque colonne, pour ajouter un peu de contraste au tableau. En utilisant les règles CSS paires et impaires, nous finirions par cibler des colonnes entières avec la même couleur, ce qui serait terrible. Avec Divi, vous pouvez personnaliser les sections spécifiques que vous souhaitez cibler. Essayons d’ajouter des fonds bleus aux en-têtes des première et troisième colonnes. Pour ce faire, localisez le module de la table des prix sur la page que vous éditez et cliquez sur son bouton Paramètres du module :
Localisez maintenant la colonne spécifique que vous voulez cibler et cliquez une fois de plus sur son bouton de paramètres :
Si vous passez à l’onglet Avancé , vous trouverez un champ appelé Pricing Heading. Vous pouvez modifier la couleur d’arrière-plan de cette section à l’aide d’une simple ligne de CSS :
background : #0C71C3 ;
Voici maintenant à quoi ressemble notre tableau :
Si vous appliquez la même modification à la colonne Développeur , vous avez essentiellement mis en place des règles paires et impaires pour cette ligne particulière :
Le reste du tableau a l’air bien, mais si vous vouliez également mettre en évidence certaines des caractéristiques de chaque plan ? C’est ce que l’on voit généralement dans les tableaux de prix, afin que les visiteurs puissent comparer les caractéristiques de chaque plan. Vous pourriez utiliser des règles paires et impaires pour cibler les lignes, et échelonner les fonctionnalités de votre plan afin que seules celles que vous souhaitez soient mises en évidence. Avec Divi, vous pouvez reproduire cet effet avec de simples signes plus et moins.
Pour ce faire, rendez-vous dans les sections de paramètres de la colonne que vous souhaitez modifier. Pour cet exemple, nous allons à nouveau cibler la colonne Basic . Si vous faites défiler son écran de paramètres principal, vous trouverez un éditeur de texte comprenant la liste de fonctionnalités que vous avez vue précédemment :
Comme vous pouvez le voir, des signes plus précèdent chaque élément. Si vous les remplacez par des signes moins, voici à quoi ils ressemblent sur le front-end :
Si vous décalez les signes plus et moins, vous pouvez créer votre propre design pair et impair. De plus, vous pouvez jouer avec l’éditeur de texte pour personnaliser encore plus les choses. Voici à quoi ressemble notre tableau après quelques ajustements supplémentaires :
Naturellement, vous devrez être plus pointilleux sur les éléments à mettre en évidence dans un vrai tableau de prix. Ainsi, les utilisateurs sauront d’un seul coup d’œil ce que chaque plan leur offre et comment il se compare aux autres.
Enfin, n’oubliez pas que le module Tableau des prix vous permet de mettre en évidence des colonnes spécifiques, comme les tableaux vedettes :
Pour choisir les colonnes que vous souhaitez mettre en évidence, allez dans leurs paramètres, puis passez à l’onglet Conception . Vous trouverez l’option en haut de la page.
Conclusion
CSS est facile à apprendre, mais difficile à maîtriser. Avec un peu de patience, tout le monde peut créer des conceptions et des effets étonnants à l’aide de ce langage. Même les éléments qui ne sont pas très voyants, comme les tableaux, peuvent prendre vie en utilisant CSS de la bonne manière, en l’occurrence avec des règles paires et impaires.
Si vous n’êtes pas du genre à vous asseoir sur le code pour le modifier jusqu’à ce que tout soit parfait, le thème Divi vous permet de personnaliser presque tous les aspects de votre site Web à l’aide de menus simples. De plus, vous pouvez prévisualiser vos modifications en quelques secondes. Avec autant de paramètres de personnalisation, il est possible de reproduire les effets des règles paires et impaires CSS assez facilement.
Vous avez des questions sur la façon d’utiliser Divi pour reproduire les règles paires et impaires dans WordPress ? Parlons-en dans la section des commentaires ci-dessous !
