Cascading Style Sheets (CSS)
|.className||Selects all elements with class name "className"|
|.className1.className2||Selects elements with both classnames "className1" and "className2". Note that there is no space between the end of the first class name and the subsequent dot.|
|element.className||Selects the HTML element type with the corresponding class name|
|id1 > id2||Here
|[attribute] or [attribute OP value]||Selects all nodes with the attribute name specified inside the square br=ackets set. Additionally the attribute selection can be further refined based on its value using the operators = (equals), ~= (containing a whole word), |= (starting with), ^= (begins with), $= (ends with), *= (contains substring). E.g., "
|id:first-child(n)||Selects any node identified by
|id:last-child(n)||Selects any node identified by
|id:nth-child(n)||Selects any node identified by
|id:nth-col(n)||Selects any node identified by
There are an absolute load more - see the W3C link above. These tend to be ones I have most often used.
Also, note that you can chain some of the pseudo classes. For example
applies a style to a button that has the mouse cursor over it and that is also disabled.
Calculating Element Properties
See the W3C's CSS Box Model Module.
- CSS Positioned Layout Module, W3C.
- Absolute, Relative, Fixed Positioning: How Do They Differ?, Chris Coyier.
- Absolute Positioning Inside Relative Positioning, Chris Coyier.
- Position: sticky;, Chris Coyier.
See the article Media Queries Demystified: CSS Min-Width and Max-Width.