Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-conditional/container-queries/multiple-conditions-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
<title>CSS Container Queries With Multiple Conditions</title>
<link rel="author" title="Emily McDonough" href="mailto:emcdonough@mozilla.com">
<link rel="match" href="multiple-conditions-001-ref.html">
<style>
.container{
container-type: inline-size;
}
.container > div{
border: thick double black;
width: 100%;
height: 20px;
margin: 1px;
}
@container (width < 75px), (width > 150px) {
div {
background-color: cyan;
}
}
@container (75px <= width <= 150px), (width = 200px) {
div {
background-color: pink;
}
}
</style>
<div class="container" style="width: 50px"><div>A</div></div>
<div class="container" style="width: 100px"><div>B</div></div>
<div class="container" style="width: 175px"><div>C</div></div>
<div class="container" style="width: 200px"><div>D</div></div>