A veces, los desarrolladores necesitan asociar algunos elementos HTML con múltiples clases y luego consultar esas clases utilizando selectores de clase. En la funcionalidad CSS "y", todos los selectores de clase en el elemento de estilo deben estar presentes para aplicar las propiedades de CSS a los elementos. Pero, en el CSS "o", La adición de selectores de clase adicionales puede aplicar las propiedades de estilo correctamente.

Entendamos el funcionamiento de CSS "y" y "o" en detalle.

Cómo aplicar la funcionalidad "y" en HTML/CSS?

El CSS "yLa funcionalidad funciona de tal manera que aplica las propiedades de CSS en los elementos cuando solo los selectores exactos asociados con esos elementos se agregan en el elemento de estilo CSS. Su funcionalidad se puede utilizar agregando el "."Selector. Además, no debe haber espacio entre los selectores de clase.

Sintaxis

La sintaxis de usar el "."El selector es el siguiente:

.clase 1.clase 2.clase3 ... ...

Ejemplo: Agregar "."Con selectores de clase CSS

Supongamos que tenemos el siguiente ejemplo de HTML donde el "

"Elemento asociado con tres clases diferentes, yo.mi., "clase 1","clase 2" y "Clase3":

CSS "y"

En el fragmento de código anterior:

• A ""El elemento de la etiqueta se agrega con múltiples clases", "clase 1","clase 2" y "Clase3".
• Dentro del elemento div, hay un "

  " título:

.clase 1.clase 2.Clase3

Text-Align: Center;
color azul;

En la sección CSS:

• Los tres selectores de clase se agregan sin ningún espacio entre ellos.
• Con la sección, hemos especificado "texto alineado" y "color"Propiedades definidas para el elemento asociado con las tres clases.

Las propiedades de CSS se aplicarán al elemento. Esto generará la siguiente salida:

Ahora, si agregamos otra clase "clase4"En el elemento de estilo CSS:

.clase 1.clase 2.Clase3.clase4

Text-Align: Center;
color azul;

Esto no aplicará propiedades en el "

"Elemento a pesar de la presencia de las tres clases relacionadas en el elemento de estilo debido a la adición de una clase adicional:

Cómo aplicar la funcionalidad "o" en HTML/CSS?

En CSS, "o"Funciones de tal manera que aplica las propiedades de CSS en todos los elementos asociados con cada clase agregada en el elemento de estilo CSS. La adición de selectores de clase adicionales no afectará el funcionamiento de los selectores. En este caso, los selectores de clase están separados con comas ","En CSS.

Sintaxis

La sintaxis para utilizar la funcionalidad "o" es la siguiente:

.clase 1, .clase 2, .clase3, ... ...

Se puede observar que ","Se agrega entre los selectores de clase.

Ejemplo: Agregar "," con selectores de clase CSS

Usemos el mismo código HTML:

CSS "o"

.clase 1, .clase 2, .Clase3

Text-Align: Center;
color azul;

En el elemento de estilo CSS, los selectores de clase se agregan separados por comas "," entre ellos.

Esto también aplicará las propiedades CSS definidas dentro del elemento de estilo CSS al elemento asociado con "clase 1","clase 2" y "Clase3":

Ahora, si agregamos un selector de clase adicional "clase4" como sigue:

.clase 1, .clase 2, .Clase3, .clase4

Text-Align: Center;
color azul;

Esto aplicará las propiedades al "

"Elemento a diferencia de CSS"y"Funcionalidad:

Esto resume el funcionamiento de CSS "y" y "o".

Conclusión

El CSS "y"Funciona de tal manera que se aplican las propiedades de CSS cuando se agregan el número exacto y los nombres de los selectores de clase que se refieren a las clases de los elementos. El CSS "o"Funciona de tal manera que las propiedades agregadas en él se aplican a los elementos incluso cuando se agrega un nombre de clase único asociado con los elementos o también si se agregan algunos selectores de clase adicionales. Este blog guió sobre agregar la funcionalidad "y" y "o" en HTML.