Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Amandeep Pasricha
14,932 PointsDo media queries have the greatest specificity on a CSS stylesheet?
Hi,
1) Does CSS look at media queries first before the other CSS code on the same style sheet? 2) Using the concepts--> importance & origin, specificity, and source order, can one explain how exactly this happens. Considering importance and origin are the same, all you have left are specificity and source order. So are @media more specific than the other CSS class selectors or something?
Thanks
3 Answers
Steven Parker
225,770 PointsMedia queries are customarily located last in the CSS, so the rules in them override any rules above them with the same specificity because of source order.
The media query itself doesn't have a specificity, but the rules inside it each have their own.
Amandeep Pasricha
14,932 Points@Steven Parker In the first paragraph, you said "they override anything above them with the SAME specificity because of source order" and then in the second sentence said the query itself doesn't have a specificity, which kind of sounded contradicting. Media query vs query itself?
Steven Parker
225,770 PointsI amended my answer to clarify that the rules have the specificity, which is based on their selectors.
Amandeep Pasricha
14,932 PointsSteven Parker That makes sense, however, the cascade starts from importance, specificity, then source order. So on the CSS page, wouldn't the cascade be checking for the feature specificity first, BEFORE looking at what comes last on the page? So based on my flawed understanding, I would assume the cascade would search for specificity on CSS selectors and not just start thinking about the order of styles on the sheet. So if the query ITSELF does NOT have ANY specificity, it wouldn't be as much of a priority. That's how I thought about it.
Steven Parker
225,770 PointsThat's why I said the rules in the media query "override any rules above them with the same specificity".