Pattern: :nth-last-of-type(Nth) The argument Nth is of the following format: ODD Odd numbers, the same signification as 2n+1 EVEN Even, the same as 2n [-|+]?[0-9]+ E.g., 0, 6, +7 [-|+]?[0-9]+N[[-|+]?[0-9]+]? E.g., 5n, 2n+1, -2n+1 Definition: The ELEM:nth-last-of-type(Nth) pseudo-class represents every element that is the Nth child of ELEM type of its parent element, counting backward from the last child. Examples: Style every <p> element whose index is odd (2n+

Pattern: :nth-of-type(Nth) The argument Nth is of the following format: ODD Odd numbers, the same signification as 2n+1 EVEN Even, the same as 2n [-|+]?[0-9]+ E.g., 0, 6, +7 [-|+]?[0-9]+N[[-|+]?[0-9]+]? E.g., 5n, 2n+1, -2n+1 Definition: The ELEM:nth-of-type(Nth) pseudo-class represents every element that is the Nth ELEM type child of its parent element. Examples: img:nth-of-type(2n+1) { background: magenta; }

Pseudo-Class - :nth-last-child()

Pattern: :nth-last-child(Nth) The argument Nth is of the following format: ODD Odd numbers, the same signification as 2n+1 EVEN Even, the same as 2n [-|+]?[0-9]+ E.g., 0, 6, +7 [-|+]?[0-9]+N[[-|+]?[0-9]+]? E.g., 5n, 2n+1, -2n+1 Definition: The :nth-last-child(Nth) pseudo-class represents every element that is the Nth child of its parent element, counting backward from the last child. Examples: Style the last 3 <p> elements in their parent element p:nth-last-c

Pseudo-Class - :nth-child()

Pattern: :nth-child(Nth) The argument Nth is of the following format: ODD Odd numbers, the same signification as 2n+1 EVEN Even, the same as 2n [-|+]?[0-9]+ E.g., 0, 6, +7 [-|+]?[0-9]+N[[-|+]?[0-9]+]? E.g., 5n, 2n+1, -2n+1 Definition: The :nth-child(Nth) pseudo-class represents every element that is the Nth child of its parent element. Examples: Style every odd row of an HTML table tr:nth-child(odd) { background-color: aquamarine; } Style every <li> eleme

Pseudo-Class - :root

Pattern: :root Definition: The :root pseudo-class matches an element which is the root of the document. It always represents the <html> element in HTML and XHTML. Examples: Style the HTML document :root { font-size: larger; }

One Page Scroll - transform your website into a one page scroll website

One Page Scroll let you transform your website into a one page scroll website that allows users to scroll one page at a time. It is perfect for creating a website in which you want to present something to the viewers. You can customise the animation timing, the selector or even the animation easing using CSS3. You can trigger page move with hotkeys as well.

jQuery threesixty - turns an array of images into a 360 degrees interactive view

jQuery threesixty is a jQuery plugin that turns an array of images into a 360 degrees interactive view that can be rotated at will. jQuery threesixty - Features: method... can be "click", "mousemove" or "auto" sensibility to adjust rotation speed autoscrollspeed to adjust the speed when method "auto" is selected parameter direction can be either "forward" or "backward" depending on how your photos were taken and how you want them to appear cycle Preload images Display a progress bar e

ingrid - adds datagrid behaviors to your tables

ingrid is an unobtrusive jQuery component that adds datagrid behaviors like column resizing, paging, sorting, row and column styling (and more) to your tables. ingrid - Features: Resizable columns, Scrolling body, Paging Toolbar and Column Sorting (server-side). Saved State (navigate away from Ingrid, come back, and she reloads your last viewed page/sort/direction). Uses jQ cookie plugin. Row selection. (Ingrid remembers this too.) Exposed object model with exposed helper methods (ing

Sieve - add an interactive search filter to any block of content

Sieve is a jQuery plugin that allows you to quickly add an interactive search filter to any block of content.

Substring Attribute Selector: [attr*=substring]

Pattern: [attr*=substring] Definition: The [attr*=substring] selector matches any element whose attr attribute value contains the substring substring. Examples: Style all <a> elements that have an href attribute value containing "w10schools" a[href*="w10schools"] { background-color: gold; }