Menu
Is there a way to combine two or more CSS selectors using a boolean condition - and, or, not?
Consider this <div>:
<div class="message error">
You have being logged out due too much activity.
</div>
Could I select only those elements that contain both the classes for instance?
Something along the lines of div.message && div.error?
411
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator. There are four different combinators in CSS: descendant selector (space)
The CSS grouping selector is used to select multiple elements and style them together. This reduces the code and extra effort to declare common styles for each element. To group selectors, each selector is separated by a space.
You can group multiple selectors into one declaration block, separating each selector with a comma. This will apply the styles to all of the matched elements in the list. You can also mix different types of selectors in the same list. The spaces are optional, but the comma is not.
These should work:
&& = div.message.error {}
|| = div.message, div.error {}
Don't think you can do "not"
Edit: Just did a quick test to confirm:
<html>
<head>
<style type="text/css">
div.error.message {
background-color: red;
}
div.message, div.error {
border: 1px solid green;
}
</style>
</head>
<body>
<div>None</div>
<div class="error">Error</div>
<div class="message">Message</div>
<div class="error message">Error Message</div>
</body>
</html>
The "message", "error" and "error message" divs all have a green border and only the "error message" div has a red background.
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
