Sometimes, the developers need to associate some HTML elements with multiple classes and then refer to those classes using class selectors. In the CSS “and” functionality, all the class selectors in the style element must be present in order to apply the CSS properties to the elements. But, in the CSS “or”, the addition of extra class selectors can apply the style properties correctly.
Let’s understand the working of CSS “and” and “or” in detail.
How to Apply “and” Functionality in HTML/CSS?
The CSS “and” functionality works in such a way that it applies the CSS properties on the elements when only the exact selectors associated with those elements are added in the CSS style element. Its functionality can be utilized by adding the “.” selector. Moreover, there should not be any space between the class selectors.
Syntax
The syntax of using the “.” selector is as follows:
Example: Adding “.” With CSS Class Selectors
Let’s suppose we have the following HTML example where the “<h1>” element associated with three different classes, i.e., “class1”, “class2” and “class3”:
<h1>CSS "and"</h1>
</div>
In the above code snippet:
- A “<div>” tag element is added with multiple classes, “class1”, “class2” and “class3”.
- Inside the div element, there is a “<h1>” heading:
{
text-align: center;
color: blue;
}
In the CSS section:
- The three class selectors are added without any space in between them.
- With the section, we have specified “text-align” and “color” properties defined for the element associated with the three classes.
The CSS properties will be applied to the element. This will generate the following output:
Now, if we add another class “class4” in the CSS style element:
{
text-align: center;
color: blue;
}
This will not apply properties on the “<h1>” element despite the presence of all three related classes in the style element because of the addition of an extra class:
How to Apply “or” Functionality in HTML/CSS?
In CSS, “or” functions in such a way that it applies the CSS properties on all the elements associated with each class added in the CSS style element. The addition of extra class selectors will not affect the working of the selectors. In this case, the class selectors are separated with commas “,” in CSS.
Syntax
The syntax to utilize the “or” functionality is as follows:
It can be observed that “,” is added between the class selectors.
Example: Adding “,” With CSS Class Selectors
Let’s use the same HTML code:
<h1>CSS "or"</h1>
</div>
{
text-align: center;
color: blue;
}
In the CSS style element, the class selectors are added separated by commas “,” between them.
This will also apply the CSS properties defined inside the CSS style element to the element associated with “class1”, “class2” and “class3”:
Now, if we add an additional class selector “class4” as follows:
{
text-align: center;
color: blue;
}
This will apply the properties to the “<h1>” element unlike CSS “and” functionality:
This sums up the working of CSS “and” and “or”.
Conclusion
The CSS “and” works in such a way that the CSS properties apply when the exact number and names of the class selectors referring to the classes of the elements are added. The CSS “or” works in such a way that properties added in it apply to the elements even when a single class name associated with the elements is added or also if some additional class selectors are added. This blog guided about adding the “and” and “or” functionality in HTML.
