CSS Media Queries & Selectors

Question

If I understand Media Queries correctly, code like this:

@media (max-width:900px){...}

runs based off of the the html tag + the vertical scrollbar if it is visible. I was wondering if it was possible to have it read a different selector, somehow.

Perhaps, something along these lines:

@media (#selector{max-width:900px}){...}

EDIT: I know anything is possible with jQuery, I am not looking for a jQuery solution.

Warmth.

Nope, not possible. You should use JS. Or provide some more code of your HTML content so we could try making a workaround for your case — Joeytje50, May 16 '14 at 18:34
You may also be interested to read [this](http://www.backalleycoder.com/2014/04/18/element-queries-from-the-feet-up/) — dentuzhik, May 16 '14 at 18:49
_“runs based off of the the html tag + the vertical scrollbar if it is visible”_ – nope. The basis for width-based media queries is the _viewport_. — CBroe, May 16 '14 at 18:49
but you can have #selector { @media (max-width:900px){...} } — cjmling, May 16 '14 at 18:49
You are asking for something like this : http://www.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/ and http://ianstormtaylor.com/media-queries-are-a-hack/ two great source to make you aware of what it's coming ;) — Vangel Tzo, May 16 '14 at 19:01
@CBroe, Yes, this is true, but what constitutes as the viewport in a PC when you resize the browser? I looked into this & it looks as thought it is the html tag + the scrollbar. — Crystal Miller, May 16 '14 at 20:05
Nope, the viewport is the area used to display the page in the browser. http://www.w3.org/TR/CSS21/visuren.html#viewport (And the `html` element _can_ be wider than this.) — CBroe, May 16 '14 at 20:16

score 1 · Answer 1 · edited May 16 '14 at 19:31

@medi is for detecting view port size.. If you need to check if current selector is less then 900px, so you need to do it with jQuery for example..

$(window).load(function(){

 var selectorWidth = $('#selector').width();

 if(selectorWidth <= 900) {

  /****do something here******/

}

})

or you can do the same in

$(document).ready(function(){

var selectorWidth = $('#selector').width();

 if(selectorWidth <= 900) {

  /****do something here******/

}

})

but better to do it after window load

CSS Media Queries & Selectors

1 Answers1