Combining two or more CSS selectors with a boolean condition_问答_开发者

Combining two or more CSS selectors with a boolean condition

开发者 https://www.devze.com 2022-12-18 00:43 出处：网络

Is there a way to combine two or more CSS selectors using a boolean condition - 开发者_如何学运维and, or, not?

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?

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.

Try div.message.error.

This is a seriously old post, but I came across it and figured I'd add to it with the current CSS :not() selector:

Select BOTH classes

.message.error {}

Select EITHER class

.message, .error {}

Select NEITHER class

div:not(.message):not(.error) {}

.message {
  border: 1px solid;
}

.error {
  color: red;
}

.message,
.error {
  margin-bottom: 12px;
  padding: 12px;
}

.message.error {
  background: #ffcfcf;
}

div:not(.message):not(.error) {
  font: normal 20px "Comic Sans MS", cursive, sans-serif;
}

<div class="message">
    ONLY .message
</div>

<div class="error">
    ONLY .error
</div>

<div class="message error">
    BOTH classes
</div>

<div class="neither">
    NEITHER class
</div>