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)