CODEWITHSUNDEEP
javascriptjquery
Ivo
Ivo

Reputation: 2636

Can someone explain this Jquery

$(document).ready(function () {
    if ((screen.width >= 1024) && (screen.height >= 768)) {
        alert('Screen size: 1024x768 or larger');
        $("link[rel=stylesheet]:not(:first)").attr({
            href: "style2.css"
        });
    } else {
        alert('Screen size: less than 1024x768, 800x600 maybe?');
        $("link[rel=stylesheet]:not(:first)").attr({
            href: "style1.css"
        });
    }
});

I'm not getting this part: $("link[rel=stylesheet]:not(:first)").attr

Upvotes: 1

Views: 142

Answers (4)

Richard
Richard

Reputation: 1052

Those are CSS selectors. In this particular example, all of the link tags whose rel values is "stylesheet" are being selected but the first one encountered will be omitted.

The following are pretty good for getting to grips with selectors:

W3Schools reference: http://www.w3schools.com/cssref/css_selectors.asp

Nettuts article: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Upvotes: 1

João Silva
João Silva

Reputation: 91379

It selects all link tags, that have an attribute named rel, whose value is stylesheet, and that is not the first one of the tags. For example, if you had:

<link rel="icon" />
<link rel="stylesheet" href="style2.css" />
<link rel="stylesheet" href="style3.css" />
<link rel="stylesheet" href="style4.css" />

The selector would pick the last two link tags. Why? Because it excludes the first one, since the value of the rel attribute is not stylesheet, but icon; and excludes the second one, because it's the first of all the links that have the attribute rel="stylesheet", and not(:first) filters this one out.

Upvotes: 3

Madevil
Madevil

Reputation: 46

link[rel=stylesheet] will select all of the tags with attribute rel="stylesheet"

and :not(:first) will filter out the first one

Upvotes: 1

David Barker
David Barker

Reputation: 14620

$("link[rel=stylesheet]:not(:first)").attr({href : "style1.css"});

break it down into its parts. The selector in this case will match any <link> element, that has a rel attribute that equals stylesheet, but it is :not the (:first) one it finds. When found. The Jquery attaches an href attribute that equals the stylesheet for the browser window size... breathe

Upvotes: 1

Related Questions