Cascading Style Sheets/Pseudo Elements and Pseudo Classes
Syntax
Use :: notation (double colon notation) for pseudo-elements(::first-line, ::first-letter, ::before, ::after, etc.) to distinguish them from pseudo-classes(:active, :hover, :focus, :link, :visited, :first-child, etc.). For compatibility with IE6/7, use single colon notation for both or IE specific styles.
Pseudo Clicks
Use :active instead of onclick events and :hover instead of onmouseover events when no data needs to be passed
Use a border color which is equal to the background color as the default value then change it in the hover state to create a rollover effect without shifting the content. Decrease the desired padding by the size of the border to adjust for it always being hidden in the background instead of inserted and removed dynamically.
Use a:active, a:focus{outline:0;width:0;height:0;} to remove the dotted line around clicked links
Use :link,:visited to style links without styling named anchor tags
Add absolutely positioned elements within link tags and reference them in hover definitions(ex. A:hover span{...}) to create rollover dropdown menus without JavaScript
Use rel="external" for all external links and a[rel~="external"] { target-new: tab; } (CSS3 Attribute Selector) to open links in a new tab
Hit Detection
Use cursor styles, transparent borders, and image maps to extend the click area of links to cover the dimensions of their parent elements without using JavaScript
If a container hasLayout(fixed width/height, inline-block,float), then block level anchors within will not have proper hit detection unless one of the links also includes a hasLayout trigger (zoom, inline-block, fixed height) for itself or a child element, or includes an image as a child element. hasLayout on the block level anchor itself may cause margins to disappear, so avoid vertical margins in that situation
If a block level link is absolutely positioned over content, it will not have proper hit detection unless it has a defined background. You can make the background transparent or use opacity to make the content visible
Use "ul > li{...}" instead of "ul li{...}" to only target the first level children of a tag instead of all nested descendants(CSS2 Child Selector)
Element Targeting
Use { target-name: modal; } (CSS3 Attribute Selector) to open links in a modal box
Use "a[href=http://abcxyz]" to target elements with specific attribute values(CSS2 Attribute Selector)