* /* a=0 b=0 c=0 */
LI /* a=0 b=0 c=1 */
UL LI /* a=0 b=0 c=2 */
UL OL+LI /* a=0 b=0 c=3 */
H1 + *[REL=up] /* a=0 b=1 c=1 */
UL OL LI.red /* a=0 b=1 c=3 */
LI.red.level /* a=0 b=2 c=1 */
#x34y /* a=1 b=0 c=0 */
#s12:not(FOO) /* a=1 b=0 c=1 */
.foo :is(.bar, #baz)
/* a=1 b=1 c=0 */
* 0-0-0 ( universal selector )
div 0-0-1 ( type selector )
::after 0-0-1 ( pseudo element )
.my-class 0-1-0 ( class selector )
:root 0-1-0 ( pseudo class )
[href] 0-1-0 ( attribute selector )
#main 1-0-0 ( id selector )
inline style; <div style="color:red">is red</div>
1-0-0-0
!important value suffix; html { background-color: #333 !important; }
1-0-0-0-1
div div 0-0-2 ( type selector )
div.my-class.second-class
0-2-1
:root .my-class.second-class
0-3-0
:root #specific-element
1-1-0
Type Selector matches elements
element-name ( html, body, div, span, a, etc. )
Universal Selector
* matches any /every element
Attribute Selector
[attributename] with attributename
[attributename="val"] exactly equal to
[attributename~="val"] containing, whitespace delimited; [class~="my-class"]
[attributename|="val"] starts with, optional hyphen
[attributename^="val"] starting with; [href^="https"]
[attributename$="val"] ends with; [href$=".jpg"]
[attributename*="val"] contains
Class Selector
.class-name with class
ID Selector
#id-name with id
Pseudo-classes
Dynamic pseudo-classes
:link
:visited
:hover
:active
:focus
The target pseudo-class
:target with id/name attribute equal to location hash
The language pseudo-class
:lang
The UI element states pseudo-classes
:enabled :not( [disabled] )
:disabled [disabled="disabled"]
:checked for checkboxes & radio buttons
Structural pseudo-classes
:root html
:nth-child nth element child of its parent
:nth-last-child
:nth-of-type nth {tag} of its parent
:nth-last-of-type
:first-child :nth-child(0)
:last-child :nth-last-child(0)
:first-of-type :nth-of-type(0)
:last-of-type :nth-last-of-type(0)
:only-child parent has only one element, div-soup
:only-of-type
:empty has no children
The negation pseudo-class
:not()
Missed ???
:is()
:where()
Pseudo-elements
::first-line
::first-letter
::before { content: "[ "; }
::after { content: " ]"; }
Combinators
Descendant combinator
A B B has an ancestor A
Child combinator
A > B B's parent matches A
Adjacent sibling combinator
A + B A & B have same parent, B immediately follows A
General sibling combinator
A ~ B A & B have same parent, B follows A
animation (@keyframes) below
Neat that the dotted border and outline ( and center </> ) appear to be rotating in opposite directions.
note: this is an interesting example of the Nyquist–Shannon sampling theorem.
Basically, take samples at more than twice the highest frequency-to-be-recorded.
That said, the css parameters that affect this (--circle-diameter, animation-duration, border-size, outline-size) don't directly map to sample rate.
div {
animation-name: diagonal-slide;
animation-duration: 5s;
animation-iteration-count: 10;
}
@keyframes diagonal-slide {
from {
left: 0;
top: 0;
}
to {
left: 100px;
top: 100px;
}
}
/*
This will produce an animation that moves an element from (0, 0) to
(100px, 100px) over five seconds and repeats itself nine times (for a total of
ten iterations).
*/
prefers-color-schemeusing variables in css. plain here, but useful occasionally
body {
--font-mono: consolas, inconsolata, courier, monospace;
font-family: var( --font-mono );
}
variables make light/dark themeing trivial.
this is a basic boilerplate to make a site dark-text-on-light-background for the light preference &
light-text-on-dark-background for the dark preference.
:root {
--text-color: black;
--bg-color: #ccc;
color: var( --text-color );
background-color: var( --bg-color );
}
@media( prefers-color-scheme: dark ) {
:root {
--text-color: white;
--bg-color: #333;
}
}
values are inherited from parent elements through the html document,
and can be overriden in children, so -example- if there is an element selected further down the document than :root,
like a paragraph within the body (body p) that set the same variable,
then that would be the value of that variable under those paragraph elements.
note that the second selector does not need to be more specific than the first
- only refer to a child deeper in the document.
#my-div { --some-color: green; }
div { --some-color: purple; }
p { color: var( --some-color ); }
then
<body> <p> default (/black) </p> <div><p> purple </p></div> <div id="my-div"> <p> green </p> <div><p> purple </p></div> </div> </body>another example:
:root { --outline-all: 1px dotted yellow ; }
section { --outline-all: 2px solid cyan ; }
body p { --outline-all: 4px inset white ; }
*:hover { outline: var( --outline-all ); }
so this applies different outlines to the elements under :root, section, & body p.
notably, both section & body p are weaker selectors than :root,
but are separate elements deeper within the document, and so affect the variable --outline-all.
theme checkboxes, change listeners, initialization event, & pre tags
using css property `content` to explicitly display the active theme.
setting css variables regarding color based on user preference on color scheme.
notably, the dark & system-dark themes must be declared independently,
even if the values are identical; this is due to the @media-scope/boundary.
maybe good for markdown pages, for example.