CSS media query operators

Question

Can some one explain to me in very simple terms what the operators and, not, only and the comma , mean and do in CSS?

I don't know how my question can be anymore helpful it states what I'm having trouble with. — teic
– teic, Commented Apr 26, 2011 at 7:41

Paul Sweatte · Accepted Answer · 2017-07-12 16:59:08Z

1

The four operators implement set theory logic. In that context, here is what each one means:

,: equivalent of 'union'; e.g. @media screen, print matches a screen or print device
and: equivalent of 'intersection'; e.g. @media screen and (min-device-width: 1920px) matches a screen device with 1920px resolution
not: equivalent of 'set difference'; e.g. @media not screen and (color) matches a device which is not a screen and supports color
only: equivalent of a 'proper superset'; e.g. @media only screen and (color) matches a device which is only a screen and only supports color

References

edited Jul 12, 2017 at 16:59

answered Dec 2, 2013 at 22:57

Paul Sweatte

24.7k7 gold badges131 silver badges270 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1