I put together a list of some nice css selectors.
Multiple background images for one element
.box {background-image: url("top-left.gif"), url("top-right.gif"), url("bottom-left.gif"), url"(bottom-right.gif");background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;background-position: top left, top right, bottom left, bottom right;}
Source: 24 ways
This Media Query expresses that the style sheet is usable on devices with viewport (the part of the screen/paper where the document is rendered) widths between 400 and 700 pixels:”
@media screen and (min-width: 400px) and (max-width: 700px) {property:value;}
This Media Query expresses that style sheet is usable on screen and handheld devices if the width of the viewport is greater than 20em.
@media handheld and (min-width: 20em) { property:value;}
Source: wc3
Sibling Selectors will make it easy to style elements without having to add so much markup. Extra divs would not no longer necessary.
Child Selector (CSS2)
Matches all li’s that are immediate children of the ul.
ul>li {
property:value;
}
Adjacent Sibling Selector(CSS2)
This example targets the p when h2 is an adjacent sibling.
-
h2+p {
property:value;
}
General Sibling Selector (CSS3)
This example will match a p element if it’s a sibling of an h2 element
h2~p {
⋮ property:value;
}
Some of these are really cool, it’s more posssible to target almost any element without using classes or wrappers.
-
:first-letter
represents the first character of the first line of text within an element
:first-line
represents the first formatted line of text
:before
specifies content to be inserted before another element
:after
specifies content to be inserted after another element
::selection
represents a part of the document that’s been highlighted by the user
-
:nth-child(N)
matches elements on the basis of their positions within a parent element’s list of child elements
:nth-last-child(N)
matches elements on the basis of their positions within a parent element’s list of child elements
:nth-of-type(N)
matches elements on the basis of their positions within a parent element’s list of child elements of the same type
:nth-last-of-type(N)
matches elements on the basis of their positions within a parent element’s list of child elements of the same type
:last-child
matches an element that’s the last child element of its parent element
:first-of-type
matches the first child element of the specified element type
:last-of-type
matches the last child element of the specified element type
nly-child
matches an element if it’s the only child element of its parent
nly-of-type
matches an element that’s the only child element of its type
:root
matches the element that’s the root element of the document
:empty
matches elements that have no children
:target
matches an element that’s the target of a fragment identifier in the document’s URI
:enabled
matches user interface elements that are enabled
:disabled
matches user interface elements that are disabled
:checked
matches elements like checkboxes or radio buttons that are checked
:not(S)
matches elements that aren’t matched by the specified selector
Source: Sitepoint
So I have been building this large list of jQuery links for sometime now and it will continue to be updated on my urls section. But here it is: