Avec les feuilles de style en cascade (CSS), vous pouvez Créez des effets impressionnants si vous avez l’expertise nécessaire. Cependant, il y a tellement d’éléments Vous pouvez personnaliser qu’il peut être difficile de maîtriser la langue.

Prenons l’exemple des règles CSS paires et impaires. Ce sont des sélecteurs peu connus qui vous permettent de cibler des éléments pairs et impairs dans des tableaux, des listes et à peu près tout ce à quoi vous pouvez penser. Dans cet article, nous allons parler du fonctionnement des règles CSS paires et impaires et de la manière dont vous pouvez les utiliser. Ensuite, nous vous apprendrons à l’utiliser Deux pour reproduire leurs effets pour des résultats encore meilleurs. Allons au travail!

Une introduction aux règles CSS paires et impaires

Un exemple de règles CSS paires et impaires.

Les règles CSS paires et impaires vous permettent de cibler des éléments très spécifiques.

Le nom de ce type de sélecteur CSS indique son objectif. Avec des règles paires et impaires, vous pouvez cibler ces deux types d’éléments et leur appliquer des styles dans presque toutes les situations.

Prenons l’exemple ci-dessus dans cette section – les colonnes paires ont toutes la même couleur de texte, tandis que les nombres impairs en utilisent une autre. Cet effet est possible car nous avons utilisé des sélecteurs pairs et impairs pour cibler chaque type d’élément et leur donner des couleurs d’arrière-plan uniques.

Pour le moment, vous êtes probablement curieux de savoir à quoi pourraient ressembler les applications de ces sélecteurs spécifiques. Décomposons-les à l’aide d’exemples:

  • Tableaux de prix. Les meilleurs tableaux de prix Utilisez des couleurs pour attirer votre attention sur les plans auxquels vous souhaitez vous inscrire. Dans ce cas, vous pouvez utiliser des sélecteurs impairs et pairs pour mettre en évidence des plans spécifiques.
  • Rendre les enregistrements étendus plus lisibles. Imaginez essayer de comprendre une longue table pleine de données. Avec un peu de CSS, vous pouvez appliquer des règles droites et de cotes pour créer un contraste entre les lignes ou les colonnes et améliorer la lisibilité.
  • Mettez en surbrillance certains éléments d’une liste. Lorsque vous incluez une longue liste dans un article, des règles paires et impaires peuvent être utiles pour mettre en évidence certains éléments. Au lieu de jouer avec les couleurs d’arrière-plan, vous pouvez rendre certains éléments en gras, modifier leur taille de police et bien plus encore.

Pour être juste, les règles CSS paires et impaires ne sont pas quelque chose que vous voyez beaucoup dans la nature. Cependant, ils sont faciles à utiliser, il n’y a donc aucune raison pour qu’ils ne fassent pas partie de votre arsenal. Parlons de la façon de les mettre en pratique!

Comment les règles CSS paires et impaires fonctionnent dans la pratique

Les tableaux sont le cas d’utilisation le plus courant des règles CSS paires et impaires, car ce sont des éléments avec des limites visuelles claires. En outre, les tableaux sont généralement composés de plusieurs éléments, ce qui en fait les candidats parfaits pour les sélecteurs en question.

Voici un exemple de table rapide et sale avec un style minimal. Il est facile à lire et donne les informations dont il a besoin, mais c’est à peu près tout:

Une table simple avec un style minimal.

Si nous voulons appliquer des règles paires et impaires, voici un exemple de ce à quoi ressemblerait 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éfinit les arrière-plans blancs pour toutes les lignes paires et les arrière-plans gris pour les nombres impairs comme suit:

Un tableau avec des arrière-plans colorés pour les lignes impaires.

Dans cet exemple, la cellule verte dans le coin de l’image est simplement mise en surbrillance.

Vous pouvez également cibler des colonnes au lieu de lignes. Ceci est utile lors de la mise en évidence de plans uniques dans les tableaux de tarification. Voici le même code que précédemment, juste 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:

Un exemple d'arrière-plans colorés pour les colonnes impaires.

Comme mentionné précédemment, vous pouvez utiliser des règles paires et impaires pour cibler essentiellement n’importe quel élément. La clé est qu’il doit contenir des sous-éléments tels que des lignes ou des colonnes – sinon le sélecteur ne saurait pas lequel cibler. Les listes comprennent, par exemple Dans le Éléments HTML pour chaque entrée. Voici un exemple:

<ul>
<li>First element.</li>
<li>Second element.</li>
<li>Third element.</li>
<li>Fourth element.</li>
</ul>


Dans ce cas, vous voulez que vos sélecteurs pairs et impairs ciblent Dans le Éléments en particulier, donc votre CSS devrait ressembler à ceci:

li:nth-child(even) {background: #CCC}
li:nth-child(odd) {background: #4D4D4D}

L’ajout de couleurs d’arrière-plan aux éléments de liste n’est bien sûr pas une pratique courante, vous souhaiterez donc probablement utiliser d’autres types de personnalisation. Par exemple, vous pouvez mettre en gras les éléments étranges 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 voir, il n’y a aucune astuce pour utiliser des sélecteurs pairs et impairs. Tout ce que vous avez à faire est de cibler les bons éléments et vous pouvez mettre en œuvre les changements que vous souhaitez sans affecter le reste de votre page.

Comment répliquer des règles CSS paires et impaires avec Divi

Si vous êtes un utilisateur Divi, vous pouvez utiliser le système modulaire pour créer des éléments sophistiqués tels que: Formulaires de contact, Tableaux de prix, galeries et bien plus pour chacune de vos pages en quelques clics. Il vous donne également accès à de puissantes fonctionnalités de personnalisation que vous pouvez utiliser pour personnaliser ces éléments.

Par exemple, en ce qui concerne les tableaux de prix, grâce à Divi, il est trop facile de reproduire les effets des règles CSS paires et impaires sans utiliser de code. Voici un exemple de tableau de prix barebones que nous avons créé à l’aide du Générateur de Divi::

Un tableau de prix simple.

Disons maintenant que nous voulions utiliser des couleurs différentes pour chaque colonne afin de donner un peu de contraste au tableau. Avec des règles CSS paires et impaires, nous finirions par cibler des colonnes entières de la même couleur, ce qui aurait l’air horrible. Divi vous permet de personnaliser les sections spécifiques que vous souhaitez cibler. Essayons d’ajouter des arrière-plans bleus aux en-têtes des première et troisième colonnes. Pour ce faire, trouvez le module du tableau de prix sur la page que vous éditez et cliquez dessus Paramètres du module Bouton:

Ouvrez l'écran des paramètres du module.

Recherchez maintenant la colonne spécifique que vous souhaitez cibler et appuyez à nouveau sur le bouton Paramètres:

Personnalisez une colonne dans votre tableau de prix.

Si tu dois sauter Avancée Sur l’onglet, vous trouverez un champ avec le nom Rubrique de prix. Vous pouvez changer la couleur d’arrière-plan de cette section avec une simple ligne de CSS:

background: #0C71C3;

Voici à quoi ressemble notre tableau:

Appliquez une couleur d'arrière-plan à une seule section.

Si vous appliquez la même modification à la développeur Colonne, vous avez essentiellement implémenté des règles paires et impaires pour cette ligne particulière:

Appliquer la même couleur à une autre section.

Le reste du tableau semble correct, mais que se passe-t-il si vous souhaitez également mettre en évidence certaines des caractéristiques de chaque plan? Ceci est généralement indiqué dans les tableaux de prix afin que les visiteurs puissent comparer les fonctionnalités offertes par chaque plan. toi pourrait Utilisez des règles paires et impaires pour les lignes et échelonnez les fonctionnalités de votre plan afin que seules celles que vous souhaitez se démarquer. Divi vous permet de reproduire cet effet en utilisant de simples signes plus et moins.

Pour ce faire, accédez aux sections des paramètres de la colonne que vous souhaitez modifier. Dans cet exemple, nous ciblons le de base Colonne à nouveau. Si vous faites défiler les principaux écrans de paramètres, vous trouverez un éditeur de texte avec la liste des fonctionnalités que vous avez vues auparavant:

Éditeur de texte Divis.

Comme vous pouvez le voir, il y a des signes plus devant chaque élément. Si vous les remplacez par des signes moins, ils ressembleront à ceci à l’avant:

Configurez certaines de vos fonctionnalités pour les afficher comme désélectionnées.

Échelonner les signes plus et moins vous permet de mettre en œuvre 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:

À quoi ressemble notre tableau de prix après la personnalisation?

Bien sûr, vous voulez être plus sélectif sur les articles à mettre en évidence dans un vrai tableau de prix. De cette façon, les utilisateurs savent exactement ce que chaque plan leur offre et comment il se compare aux autres en un coup d’œil.

Enfin, rappelez-vous que le Table de prix Avec ce module, vous pouvez mettre en évidence certaines colonnes en tant que tableaux en vedette:

Activez la fonctionnalité de tableau présenté.

Pour choisir les colonnes que vous souhaitez mettre en surbrillance, accédez à leurs paramètres, puis passez à conception Tab Vous trouverez l’option en haut.

Conclusion

Le CSS est facile à apprendre, mais difficile à maîtriser. Avec un peu de patience, n’importe qui peut créer des designs et des effets étonnants en utilisant le langage. Même les éléments qui ne sont pas aussi visibles, tels que: Les CSS, tels que les tableaux, peuvent être mis en œuvre de la bonne manière – dans ce cas avec des règles paires et impaires.

Si vous n’êtes pas le seul à peaufiner le code jusqu’à ce que les choses semblent parfaites, c’est tout Deux Avec Thème, vous pouvez 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 CSS paires et impaires avec une relative facilité.

Avez-vous des questions sur l’utilisation de Divi pour répliquer des règles paires et impaires dans WordPress? Parlons-en dans la section commentaires ci-dessous!

Vignette de l’article de Ket4up / shutterstock.com





Source link

Recent Posts