$.expr[':']['nth-of-type'] = function(elem, i, match) { var parts = match[3].split("+"); return (i + 1 - (parts[1] || 0)) % parseInt(parts[0], 10) === 0;
};

See the original article for more info on adding the other "of type" selectors.

Self invoking anonymous function assigned to the yournamespacechoice global variable. Serves the effect of keeping all functions and variables private to this function. To expose a function or variable we must explictly return it at the bottom of the function. Remaps jQuery to $.

var yournamespacechoice = (function ($) { var publicfunction; function privatefunction() { // function only available within parent function } publicfunction = function publicfunction() { // public function available outside of this funtion }; // Expose any functions that we need to access outside of this scope. Use yournamespacechoice.functionName() to call them. return { publicfunction: publicfunction };
}(window.$));

<h1 class="ribbon"> <strong class="ribbon-content">Everybody loves ribbons</strong>
</h1>

.ribbon { font-size: 16px !important; /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */ width: 50%; position: relative; background: #ba89b6; color: #fff; text-align: center; padding: 1em 2em; /* Adjust to suit */ margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after { content: ""; position: absolute; display: block; bottom: -1em; border: 1.5em solid #986794; z-index: -1;
}
.ribbon:before { left: -2em; border-right-width: 1.5em; border-left-color: transparent;
}
.ribbon:after { right: -2em; border-left-width: 1.5em; border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after { content: ""; position: absolute; display: block; border-style: solid; border-color: #804f7c transparent transparent transparent; bottom: -1em;
}
.ribbon .ribbon-content:before { left: 0; border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after { right: 0; border-width: 1em 1em 0 0;
}

Protector

This technique uses negative z-index values on some of the pseudo elements. That means that they can go behind other elements that have opaque backgrounds, which ruins the effect. To fix this, you'll need to make sure the immediate parent of the ribbons does not have a background applied and has relative postioning with positive z-index. Use an additional wrapper if needed.

<div class="non-semantic-protector"> <!-- ribbons and other content in here -->
</div>

.non-semantic-protector { position: relative; z-index: 1; }

Example

We can use multiple text-shadow and box-shadow values to create a three-dimensional look to blocks or text, like this screenshot of David DeSandro's footer. However in that example, the "three dimesional" part is a solid color.

By alternating colors back and forth in the "stacking order" of our box or text shadow declaration, we can simulate a more three dimensional / lighted effect.

text-shadow: 1px 0px #eee, 0px 1px #ccc, 2px 1px #eee, 1px 2px #ccc, 3px 2px #eee, 2px 3px #ccc, 4px 3px #eee, 3px 4px #ccc, 5px 4px #eee, 4px 5px #ccc, 6px 5px #eee, 5px 6px #ccc, 7px 6px #eee, 6px 7px #ccc, 8px 7px #eee, 7px 8px #ccc, 8px 8px #eee;

Example

a { position: relative; padding-bottom: 6px; } a:hover::after { content: ""; position: absolute; bottom: 2px; left: 0; height: 1px; width: 100%; background: #444; background: -webkit-gradient(linear, left top, right top, color-stop(0%,transparent), color-stop(50%,#444), color-stop(100%,transparent)); background: -webkit-linear-gradient(left, transparent 0%,#444 50%,transparent 100%); background: -moz-linear-gradient(left, transparent 0%, #444 50%, #transparent 100%); background: -ms-linear-gradient(left, transparent 0%,#444 50%,#transparent 100%); background: -o-linear-gradient(left, transparent 0%,#444 50%,transparent 100%); background: linear-gradient(left, transparent 0%,#444 50%,transparent 100%); }

#foo:checked::before,
input[type="checkbox"] { position:absolute; clip: rect(0,0,0,0); clip: rect(0 0 0 0);
} #foo:checked,
input[type="checkbox"] + label::before { content: url('checkbox.png');
} input[type="checkbox"]:checked + label::before { content: url('checkbox-checked.png');
}

#foo doesn't reference any particular element, it's there purely to prevent browsers from implementing the later selectors if it doesn't understand that (since most browsers will drop the entire selector if any part of it fails).

HTML

Wrapper with div's as the "slides", which can contain any content.

<div id="slideshow"> <div> <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg"> </div> <div> <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg"> </div> <div> Pretty cool eh? This slide is proof the content can be anything. </div>
</div>

CSS

Slides need to be absolutely positioned within the wrapper. This has a tiny bit of extra pizazz:

#slideshow { margin: 50px auto; position: relative; width: 240px; height: 240px; padding: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.4);
} #slideshow > div { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px;
}

jQuery JavaScript

Run after DOM is ready.

$("#slideshow > div:gt(0)").hide(); setInterval(function() { $('#slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('#slideshow');
}, 3000);

See it

View Demo

Very similar one from Snook.

Any ol' anchor link can be a link to a PDF document, but clicking a link like that thinking otherwise can be surprising and uncomfortable for a user. This CSS can visually signify those links.

/* Add " (PDF)" text after links that go to PDFs */
a[href$=".pdf"]:after { content: " (PDF)"; } /* If file size specified as data attribute, use that too */
a[href$=".pdf"][data-size]:after { content: " (PDF, " attr(data-size) ")"; }

So...

<p>Watch out for the <a href="some.pdf">PDF bomb</a> here!</p>

Becomes:

Watch out for the PDF bomb (PDF) here!

Or...

<p>Watch out for the <a href="some.pdf" data-size="2 MB">PDF bomb</a> here!</p>

Becomes:

Watch out for the PDF bomb (PDF, 2 MB) here!

<a href="http://site.com" onclick="window.external.AddFavorite(this.href,this.innerHTML);">Add Favorite and Go-To-There</a>

The first param to AddFavorite is the URL, the second the text to offer up for saving. So this inline JavaScript is reusable in the sense that it will pull those values dynamically from the anchor link itself.