LOGICAL OPERATORS IN MEDIA QUERIES

Technology speaks the language of logic.

Every instruction should be:

• clear
• unambiguous
• consistent

Logical operators help us combine conditions and create precise rules.

In media queries, logical operators let us describe situations like:

• apply styles from 600px to 900px
• apply styles up to 600px or from 900px
• apply styles everywhere except printing

1. Why logical operators are needed

Sometimes one condition is not enough.

For example, we may want styles:

• only in the middle range
• at two separate ranges
• everywhere except one type of output

Examples:

• from 600px to 900px
• up to 600px or after 900px
• not for print

To do this, media queries support logical operators:

• and
• or
• not

Logical operators in media queries
|
|- and  -> all conditions must be true
|- or   -> at least one condition must be true
+- not  -> invert the whole condition

2. Main meaning of each operator

and

• all conditions must be true

or

• at least one condition must be true

not

• the whole condition becomes true in the opposite case

and  -> A AND B
        true only if both are true

or   -> A OR B
        true if at least one is true

not  -> NOT A
        true when A is false

and  -> intersection
or   -> union
not  -> opposite / outside

3. General syntax idea

Media queries can combine media types and media features.

General structure:

@media only|not media-type only|and|not (media-feature) {
  /*
    A set of CSS rules that should be applied to the document
    if the media type and expression condition is true
  */
}

In practice, the operators you will use most often are:

• and
• comma , as or
• sometimes not

@media
  |- media type
  |- logical operator
  +- media feature(s)

4. The and operator

The and operator means: all connected conditions must be true.

It is used:

• between media type and media feature
• between several media features

This is the most common logical operator in media queries.

Example:

@media screen and (min-width: 400px) and (max-width: 800px) {
  body {
    background-color: red;
  }
}

How to read it:

Apply styles if:
1. the page is on a screen
AND
2. width is at least 400px
AND
3. width is at most 800px

So both conditions must be true at the same time.

5. and as a range between two breakpoints

One of the most common uses of and is creating a range.

Example:

@media (min-width: 600px) and (max-width: 960px) {
  body {
    background-color: gray;
  }
}

This means:

• width must be at least 600px
• width must also be at most 960px

So the active range is:

600px to 960px

Range diagram:

0 ---- 599 | 600 ------------------- 960 | 961 ----------->
            styles active here

Examples:

500px -> no
600px -> yes
750px -> yes
960px -> yes
961px -> no

6. Simple way to understand and

Think of and like a gate with two locks.

The styles are applied only if:

• lock 1 is open
• and lock 2 is also open

Condition A: width >= 600
Condition B: width <= 960

A = true
B = true
---------
Styles apply

If one condition is false:

Condition A: true
Condition B: false

Styles do NOT apply

Short memory line:

and = both must be true

7. The or operator

The or operator means: at least one condition must be true.

In media queries, or is written as:

,

That is, a comma acts like or.

Example:

@media screen and (max-width: 600px), (min-width: 900px) {
  body {
    background-color: orange;
  }
}

This means:

• apply styles up to 600px
• or from 900px upward

8. How to read or

The previous example can be read as:

Use orange background when:
- width is up to 600px
OR
- width is from 900px

Range diagram:

<---------------- 600 | 601 ------ 899 | 900 ------------------>
orange active         no orange         orange active

Examples:

500px -> orange
600px -> orange
700px -> no orange
899px -> no orange
900px -> orange
1200px -> orange

9. or means separate matching zones

Unlike and, which creates one middle range, or can create two or more separate active ranges.

and:
one continuous zone
[ 600 ---------------- 960 ]

or:
two separate zones
[ up to 600 ]     [ from 900 ]

or = this zone OR that zone

10. or vs writing separate media queries

This:

@media screen and (max-width: 600px), (min-width: 900px) {
  body {
    background-color: orange;
  }
}

has the same practical effect as writing:

@media (max-width: 600px) {
  body {
    background-color: orange;
  }
}

@media (min-width: 900px) {
  body {
    background-color: orange;
  }
}

Why use the comma version? Because it avoids repeating the same CSS block.

Comma version
-> shorter
-> no duplicated style block

Two separate queries
-> same result
-> more repeated code

11. The “UP TO” and “FROM” trick

A very useful reading trick:

• replace max-width with UP TO
• replace min-width with FROM

Example:

@media (max-width: 600px), (min-width: 900px)

Read it like this:

UP TO 600px
OR
FROM 900px

This makes ranges much easier to understand.

Examples:

(max-width: 600px) -> UP TO 600px
(min-width: 900px) -> FROM 900px

12. The not operator

The not operator means negation.

It inverts the meaning of the whole media query.

Example:

@media not print {
  /* ... */
}

Meaning:

• apply styles everywhere except printing

print      -> no
everything else -> yes

Condition: print
not print -> opposite of print

13. Important rule about not

When using not, the media type must be specified.

Why?

Because if you omit the media type, the default becomes:

all

So this:

/* Never runs */
@media not (max-width: 500px) {
  /* ... */
}

is treated like:

@media not all and (max-width: 500px)

And not all effectively means:

never apply

So that query never runs.

14. Why not (max-width: 500px) is a trap

This looks like it should mean:

not width up to 500px

But in media query syntax, without a media type, it becomes invalid in the practical sense and never runs as expected.

You write:
not (max-width: 500px)

Browser interprets:
not all ...

Result:
query never matches

So remember:

With not, specify the media type.

15. Example of not with media type

Example:

@media not screen and (max-width: 500px) {
  body {
    background-color: tomato;
  }
}

This syntax can be hard to read.

The important thing is: not applies to the whole query expression after it, not just one small part.

So this does not mean:

not screen, but width <= 500

It means the whole expression is negated.

16. How not applies to the whole query

This is the key point.

In:

@media not screen and (max-width: 500px)

the not applies to:

screen and (max-width: 500px)

So it means:

NOT (screen and width <= 500px)

Inside condition:
screen AND width <= 500

Then:
NOT of the whole thing

This is why not can feel confusing.

17. Why not is used rarely

The not operator is used very rarely because:

• it is harder to read
• it is easy to misunderstand
• there is often a simpler direct way to express the same condition

For example, instead of:

@media not screen and (max-width: 500px) {
  body {
    background-color: tomato;
  }
}

it is usually clearer to write:

@media (min-width: 500px) {
  body {
    background-color: tomato;
  }
}

This is easier to understand immediately.

not version     -> harder to read
direct version  -> easier to read

18. Prefer positive conditions when possible

A very good practical habit is: write the condition directly instead of through negation when possible.

Example:

Harder:

@media not screen and (max-width: 500px) {
  /* ... */
}

Clearer:

@media (min-width: 500px) {
  /* ... */
}

Complicated:
NOT (small screen case)

Simple:
FROM 500px

So in practice:

• prefer min-width
• prefer max-width
• use not only when it truly helps

19. Visual comparison of all three operators

and

Condition A AND Condition B

Example:
FROM 600px AND UP TO 900px

0 --- 599 | 600 -------- 900 | 901 --->
           active area

or

Condition A OR Condition B

Example:
UP TO 600px OR FROM 900px

<------ 600 | 601 --- 899 | 900 ------->
 active                    active

not

NOT Condition A

Example:
NOT print

print     -> inactive
screen    -> active

20. Range-building examples

Middle range:

@media (min-width: 600px) and (max-width: 900px) {
  body {
    background-color: green;
  }
}

0 --- 599 | 600 -------- 900 | 901 --->
           green active

Outer ranges:

@media (max-width: 600px), (min-width: 900px) {
  body {
    background-color: orange;
  }
}

<------ 600 | 601 --- 899 | 900 ------->
 orange                     orange

21. How to choose the right operator

Use and when:

• you need one continuous range
• all conditions must be true

Use or when:

• you need separate ranges
• one matching condition is enough

Use not when:

• you need a real negation
• and no clearer direct form exists

Need one middle range?
-> use and

Need two separate ranges?
-> use or

Need opposite of a full query?
-> maybe use not

22. Big structure diagram

Logical operators in media queries
|
|- and
|    |- all conditions true
|    |- most common
|    +- used for ranges
|
|- or
|    |- at least one condition true
|    |- written as comma
|    +- used for separate ranges
|
+- not
     |- negates whole query
     |- rare
     |- requires media type
     +- often better replaced by simpler logic

23. Mini cheat sheet

and -> all conditions must be true
or  -> at least one condition must be true
not -> invert the whole query

min-width -> FROM
max-width -> UP TO

Quick reading examples:

(min-width: 600px) and (max-width: 900px)
-> FROM 600px UP TO 900px

(max-width: 600px), (min-width: 900px)
-> UP TO 600px OR FROM 900px

24. Common mistakes

Mistake 1: Using and when you actually need two separate ranges.

Problem: you create one middle range instead of two outer ranges.

Wanted:
small OR large

Wrote:
small AND large

Result:
impossible or wrong range

Mistake 2: Forgetting that comma means or.

Problem: you may think it separates unrelated rules, but it actually creates alternative conditions.

Mistake 3: Using not without a media type.

Problem: the query may never run.

Example:

@media not (max-width: 500px) {
  /* never runs */
}

Mistake 4: Thinking not applies only to the nearest feature.

Problem: in media query syntax, it applies to the whole query after it.

Mistake 5: Writing complicated negation when a direct positive condition is clearer.

Problem: the code becomes harder to read and maintain.

25. Final summary

Logical operators make media query conditions more precise.

Important things to remember:

• and means all conditions must be true
• or means at least one condition must be true
• in media queries, or is written as a comma
• not negates the whole media query
• and is most often used to describe a range between two breakpoints
• or is useful for separate matching ranges
• not is rare and must be used carefully
• min-width is easy to read as FROM
• max-width is easy to read as UP TO

Super short memory line:

and = both
or = either
not = opposite