In modern CSS, logical operations are primarily handled through specific pseudo-classes and within the context of media queries, allowing for more dynamic and responsive styling. While there aren't direct and, or, and not keywords in the same way as in some programming languages for general styling, their concepts are fundamental to writing advanced and efficient CSS.
The and logical operator
In CSS, the and logic is most prominently used in media queries to apply styles only when multiple conditions are met. This is crucial for creating responsive designs that adapt to various device characteristics. It is also implicitly used when chaining selectors.
Example 1: Chaining Selectors
/* Selects an element that is both a 'p' and has the class '.highlight' */
p.highlight {
color: blue;
}
Explanation
This code targets <p> elements that also have the class highlight. The absence of a space between p and .highlight acts as an "and" condition, meaning both must be true for the style to apply.
Example 2: Media Query for screen size and orientation
/* Applies styles when the viewport is at least 600px wide AND in landscape orientation */
@media screen and (min-width: 600px) and (orientation: landscape) {
body {
background-color: lightblue;
}
}
Explanation
The and keyword in this media query ensures that the enclosed styles are applied only when the device screen has a minimum width of 600 pixels and is in landscape mode.
Example 3: Combining class selectors
/* Selects elements with both 'button' and 'primary' classes */
.button.primary {
background-color: #007bff;
color: white;
}
Explanation
This selector targets elements that have been assigned both the button class and the primary class. This is a common pattern for creating component variations.
Example 4: Attribute and class selector
/* Selects 'a' elements with a 'target="_blank"' attribute AND the class '.external-link' */
a[target="_blank"].external-link {
text-decoration: underline dotted;
}
Explanation
This rule applies a dotted underline to an <a> tag only if it has the target="_blank" attribute and the .external-link class, combining attribute and class selectors.
The or logical operator
The "or" logic in CSS is achieved using a comma-separated list of selectors or with the :is() and :where() pseudo-classes. This allows you to apply the same styles to multiple, different elements, classes, or IDs in a single rule.
Example 1: Grouping Selectors with a Comma
/* Applies the same color to h1, h2, and h3 elements */
h1, h2, h3 {
color: #333;
}
Explanation
The comma acts as an "or" operator, applying the color style to <h1> elements, OR <h2> elements, OR <h3> elements. This is more efficient than writing a separate rule for each.
Example 2: The :is() Pseudo-class
/* Applies styles to any 'p', 'li', or 'span' element that is a child of an 'article' */
article :is(p, li, span) {
line-height: 1.6;
}
Explanation
The :is() pseudo-class takes a selector list as its argument and selects any element that matches any of the selectors in that list. It simplifies complex selector lists.
Example 3: The :where() Pseudo-class
/* Applies margin to any 'header' or 'footer' within a 'div' or 'section' */
:where(div, section) :where(header, footer) {
margin-bottom: 20px;
}
Explanation
Similar to :is(), :where() also matches one of the selectors in the list. The key difference is that :where() always has a specificity of 0, making it easier to override its styles later.
Example 4: Media Query with comma-separated conditions
/* Applies styles if the device is a screen OR if it is for printing */
@media screen, print {
body {
font-family: sans-serif;
}
}
Explanation
In this media query, the comma acts as an "or". The styles will be applied if the media type is screen or if the page is being printed.
The not logical operator
The "not" logic is implemented using the :not() pseudo-class. It allows you to select elements that do not match a specific selector, providing a way to exclude elements from a selection.
Example 1: Basic :not() Usage
/* Selects all 'p' elements that DO NOT have the class '.intro' */
p:not(.intro) {
font-size: 14px;
}
Explanation
This rule applies the font-size to all paragraph elements except for those that have the class intro.
Example 2: Chaining :not()
/* Selects 'div' elements that DO NOT have the id '#header' AND DO NOT have the class '.footer' */
div:not(#header):not(.footer) {
padding: 10px;
}
Explanation
You can chain :not() pseudo-classes to exclude elements based on multiple conditions. This example selects <div>s that are not the header and not the footer.
Example 3: :not() with child elements
/* Selects all elements that are NOT a 'span' inside a 'p' */
p *:not(span) {
font-weight: bold;
}
Explanation
This targets any element (*) inside a <p> tag and makes it bold, as long as that element is not a <span>.
Example 4: Using :not() in a media query
/* Applies styles for all media types that are NOT 'print' */
@media not print {
body {
color: #444;
}
}
Explanation
The not operator in a media query inverts the condition. In this case, the styles are applied to all media types except for print.