Parfois, les développeurs doivent associer certains éléments HTML à plusieurs classes, puis se référer à ces classes à l'aide de sélecteurs de classe. Dans la fonctionnalité CSS «et», tous les sélecteurs de classe dans l'élément de style doivent être présents afin d'appliquer les propriétés CSS aux éléments. Mais, dans le CSS "ou», L'ajout de sélecteurs de classe supplémentaires peut appliquer correctement les propriétés de style.

Comprenons le fonctionnement de CSS "et" et "ou" en détail.

Comment appliquer la fonctionnalité «et» dans HTML / CSS?

Le CSS "et»La fonctionnalité fonctionne de telle manière qu'il applique les propriétés CSS sur les éléments lorsque seuls les sélecteurs exacts associés à ces éléments sont ajoutés dans l'élément de style CSS. Ses fonctionnalités peuvent être utilisées en ajoutant le «.»Selecteur. De plus, il ne devrait pas y avoir d'espace entre les sélecteurs de classe.

Syntaxe

La syntaxe de l'utilisation du «.»Le sélecteur est le suivant:

.classe 1.classe2.classe 3… …

Exemple: ajout «.»Avec les sélecteurs de classe CSS

Supposons que nous ayons l'exemple HTML suivant où le «

»Élément associé à trois classes différentes, je.e., "classe 1","classe2" et "classe3»:

CSS "et"

Dans l'extrait de code ci-dessus:

• UN ""L'élément de balise est ajouté avec plusieurs classes,"classe 1","classe2" et "classe3".
• À l'intérieur de l'élément div, il y a un «

  ”En-tête:

.classe 1.classe2.classe3

Texte-aligne: Centre;
Couleur bleue;

Dans la section CSS:

• Les trois sélecteurs de classe sont ajoutés sans aucun espace entre eux.
• Avec la section, nous avons spécifié «alignement de texte" et "couleur»Propriétés définies pour l'élément associé aux trois classes.

Les propriétés CSS seront appliquées à l'élément. Cela générera la sortie suivante:

Maintenant, si nous ajoutons une autre classe "classe4”Dans l'élément de style CSS:

.classe 1.classe2.classe3.classe4

Texte-aligne: Centre;
Couleur bleue;

Cela n'appliquera pas de propriétés sur le «

»Élément malgré la présence des trois classes connexes dans l'élément de style en raison de l'ajout d'une classe supplémentaire:

Comment appliquer la fonctionnalité «ou» dans HTML / CSS?

Dans CSS, "ou”Fonctions de telle manière qu'il applique les propriétés CSS sur tous les éléments associés à chaque classe ajoutée dans l'élément de style CSS. L'ajout de sélecteurs de classe supplémentaires n'affectera pas le fonctionnement des sélecteurs. Dans ce cas, les sélecteurs de classe sont séparés avec des virgules ","Dans CSS.

Syntaxe

La syntaxe pour utiliser la fonctionnalité «ou» est la suivante:

.classe 1, .classe2, .classe3,… …

On peut observer que «,"Est ajouté entre les sélecteurs de classe.

Exemple: ajout de «» avec des sélecteurs de classe CSS

Utilisons le même code HTML:

CSS "ou"

.classe 1, .classe2, .classe3

Texte-aligne: Centre;
Couleur bleue;

Dans l'élément de style CSS, les sélecteurs de classe sont ajoutés séparés par des virgules "," entre eux.

Cela appliquera également les propriétés CSS définies à l'intérieur de l'élément de style CSS à l'élément associé à «classe 1","classe2" et "classe3»:

Maintenant, si nous ajoutons un sélecteur de classe supplémentaire "classe4" comme suit:

.classe 1, .classe2, .classe3, .classe4

Texte-aligne: Centre;
Couleur bleue;

Cela appliquera les propriétés au «

"Élément contrairement à CSS"et" Fonctionnalité:

Cela résume le fonctionnement de CSS "et" et "ou".

Conclusion

Le CSS "et"Fonctionne de telle manière que les propriétés CSS s'appliquent lorsque le nombre exact et les noms des sélecteurs de classe se référant aux classes des éléments sont ajoutés. Le CSS "ou"Fonctionne de telle manière que les propriétés ajoutées s'appliquent aux éléments même lorsqu'un seul nom de classe associé aux éléments est ajouté ou également si certains sélecteurs de classe supplémentaires sont ajoutés. Ce blog a guidé sur l'ajout de fonctionnalités «et» et «ou» dans HTML.