Combining two or more CSS selectors with a boolean condition

css, css-selectors

Solution

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.

Problem

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`?

Original source