Selectors: Pseudo-Classes CSS3 provides four powerful pseudo-classes that allow the CSS designer to select multiple elements according to their positions in a document tree. Using these pseudo-classes can be a little confusing at first, but it’s easy once you get the hang of it. The pseudo-classes are: :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 http://reference.sitepoint.com/css/understandingnthchildexpressions
Selectors: Pseudo-Classes :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 :only-child - matches an element if it’s the only child element of its parent :only-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 Pseudo-class - matches elements like checkboxes or radio buttons that are checked :not(S) - matches elements that aren’t matched by the specified selector http://reference.sitepoint.com/css/css3psuedoclasses
Cross-browser support with CSS Vendor Prefixes CSS vendor prefixes or CSS browser prefixes are a way for browser makers to add support for new CSS features in a sort of testing and experimentation period. Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn’t been finalized. The CSS browser prefixes are: Android: -webkit- Chrome: -webkit- Firefox: -moz- Internet Explorer: -ms- iOS: -webkit- Opera: -o- Safari: -webkit- http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm
Cross-browser support with CSS Vendor Prefixes In most cases, to use a more advanced CSS style property, you take the standard CSS property and add the prefix above for each browser. For example, if you want to add a CSS3 transition to your document, you would use the transition property with the prefixes listed first: -webkit-transition: all 4s ease; -moz-transition: all 4s ease; -ms-transition: all 4s ease; -o-transition: all 4s ease; transition: all 4s ease; http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm
Cross-browser support with CSS Vendor Prefixes Yes, might feel annoying and repetitive to have to write the properties 2–5 times to get it to work in all browsers, but it’s temporary. As browsers improve, they add support for the standards based version of the property, and you can remove the prefixed versions. For example, just a few years ago, to set a rounded corner on a box you had to write: -moz-border-radius: 10px 5px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 5px; border-radius: 10px 5px; But now you really only need: -webkit-border-radius: 10 5px; border-radius: 10px 5px; http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.