Às vezes, os desenvolvedores precisam associar alguns elementos HTML a várias classes e depois se referir a essas classes usando seletores de classe. No CSS “e” funcionalidade, todos os seletores de classe no elemento de estilo devem estar presentes para aplicar as propriedades CSS aos elementos. Mas, no CSS “ou”, A adição de seletores de classe extra pode aplicar as propriedades de estilo corretamente.

Vamos entender o funcionamento do CSS "e" e "ou" em detalhes.

Como aplicar a funcionalidade “e” em HTML/CSS?

O CSS “e”A funcionalidade funciona de tal maneira que aplica as propriedades CSS nos elementos quando apenas os seletores exatos associados a esses elementos são adicionados no elemento do estilo CSS. Sua funcionalidade pode ser utilizada adicionando o “.”Seletor. Além disso, não deve haver espaço entre os seletores de classe.

Sintaxe

A sintaxe de usar o “.”O seletor é o seguinte:

.classe 1.Classe2.classe3… …

Exemplo: Adicionando “.”Com seletores de classe CSS

Suponhamos que tenhamos o seguinte exemplo html onde o “

”Elemento associado a três classes diferentes, eu.e., ““classe 1","Classe2" e "Classe3”:

CSS "e"

No trecho de código acima:

• A "”O elemento de tag é adicionado com várias classes,“classe 1","Classe2" e "Classe3”.
• Dentro do elemento div, há um “

  " cabeçalho:

.classe 1.Classe2.Classe3

Alinhamento de texto: centro;
cor azul;

Na seção CSS:

• Os três seletores de classe são adicionados sem nenhum espaço entre eles.
• Com a seção, especificamos “alinhamento de texto" e "cor”Propriedades definidas para o elemento associado às três classes.

As propriedades do CSS serão aplicadas ao elemento. Isso gerará a seguinte saída:

Agora, se adicionarmos outra aula “Classe4”No elemento de estilo CSS:

.classe 1.Classe2.Classe3.Classe4

Alinhamento de texto: centro;
cor azul;

Isso não aplicará propriedades no “

”Elemento apesar da presença de todas as três classes relacionadas no elemento de estilo devido à adição de uma classe extra:

Como aplicar a funcionalidade "ou" em HTML/CSS?

No CSS, “ou”Funciona de tal maneira que aplique as propriedades CSS em todos os elementos associados a cada classe adicionada no elemento de estilo CSS. A adição de seletores de classe extra não afetará o funcionamento dos seletores. Nesse caso, os seletores de classe são separados com vírgulas “,”No CSS.

Sintaxe

A sintaxe para utilizar a funcionalidade "ou" é a seguinte:

.classe 1, .Classe2, .classe3,… …

Pode -se observar que “,”É adicionado entre os seletores de classe.

Exemplo: Adicionando "" com seletores de classe CSS

Vamos usar o mesmo código HTML:

CSS "ou"

.classe 1, .Classe2, .Classe3

Alinhamento de texto: centro;
cor azul;

No elemento de estilo CSS, os seletores de classe são adicionados separados por vírgulas “," entre eles.

Isso também aplicará as propriedades CSS definidas dentro do elemento de estilo CSS ao elemento associado a “classe 1","Classe2" e "Classe3”:

Agora, se adicionarmos um seletor de classe adicional “Classe4" do seguinte modo:

.classe 1, .Classe2, .Classe3, .Classe4

Alinhamento de texto: centro;
cor azul;

Isso aplicará as propriedades ao “

"Elemento diferente de CSS"e”Funcionalidade:

Isso resume o funcionamento de CSS “e” e “ou”.

Conclusão

O CSS “e”Funciona de tal maneira que as propriedades CSS se apliquem quando o número exato e os nomes dos seletores de classe referentes às classes dos elementos forem adicionados. O CSS “ou”Funciona de tal maneira que as propriedades adicionadas nele se apliquem aos elementos, mesmo quando um único nome de classe associado aos elementos é adicionado ou também se alguns seletores de classe adicionais forem adicionados. Este blog orientou a adição da funcionalidade "e" e "ou" em HTML.