pocket book

" >> $@ + echo "

" >> $@ + cmark $< >> $@ + perl -p0i -e '$$i or $$i++; s!(\s*){2}(?{$$i++})!

\n\n

!g' $@ + echo "

" >> $@ + cat $(htmlfooter) >> $@ $(cssfiles): css/%.css : css/%.scss $(sass_includedir) sassc -I $(sass_includedir) $< $@ clean: - rm -f $(cssfiles) + rm -f $(cssfiles) $(htmlpages) .PHONY: clean diff --git a/README b/README index 1104d61..2790ce2 100644 --- a/README +++ b/README @@ -8,7 +8,7 @@ Preparations 1) Use the stable release (Stretch) of Debian 2) Install needed tools: - sudo apt install git sassc compass-toolkit-plugin + sudo apt install git sassc compass-toolkit-plugin cmark Use diff --git a/index.md b/index.md new file mode 100644 index 0000000..929672d --- /dev/null +++ b/index.md @@ -0,0 +1,184 @@ +[dinky pocket book]{}CSS Selectors +================================== + +--- + +--- + +Simple selectors +---------------- + +assume throughout that `E` and `F` are elements, +they can have attribute `foo` +e.g. ``{style="white-space: nowrap"} +you can replace these with any elements or attributes. + +In HTML, elements in CSS can be uppercase like these examples. +In XHTML, elements must be lower case. +Classes and IDs are **always** case sensitive + +[**universal selector**, match any element]{.micro} `*` + +[**type** (or element) selector]{.micro} `E` + +[**ID selector** an E element with ID equal to "myid", +e.g.``]{.micro} `E#myid` + +[**class selector** an E element whose class is "myclass", +e.g.``]{.micro} `E.myclass` + +--- + +--- + +Combinators & negation +---------------------- + +[**descendant combinator** to style an F element, +which is a descendant of an E element]{.micro} `E F` + +[**child combinator** an F element +which is the direct child of an E element]{.micro} `E > F` + +[**adjacent sibling combinator** an F element +that is immediately preceded by an E element]{.micro} `E + F` + +[**general sibling combinator** an F element +preceded at some point by an E element]{.micro} `E ~ F` + +[**negation pseudo-class** an E element +that does not match simple selector `s`]{.micro} `E:not(s)` + +--- + +--- + +Attribute selectors +------------------- + +[element E with a "foo" attribute]{.micro} `E[foo]` + +[E’s attribute `foo`, +value exactly equal to `bar`]{.micro} `E[foo="bar"]` + +[E’s attribute `foo`, +value is whitespace-separated values, +one of which is exactly "bar"]{.micro} `E[foo~="bar"]` + +[E’s attribute `foo`, +value begins exactly "bar"]{.micro} `E[foo^="bar"]` + +[E’s attribute `foo`, +value ends exactly "bar"]{.micro} `E[foo$="bar"]` + +[E’s attribute `foo`, +value contains substring "bar"]{.micro} `E[foo*="bar"]` + +[E’s attribute `foo` has a hyphen-separated list of values +beginning (from the left) with "en"]{.micro} `E[foo|="en"]` + +--- + +--- + +Structural pseudo-classes +------------------------- + +`n` can be replaced with an expression +in all following cases +`n` can be (odd), (even) or expressions such as (3n + 1) + +an E element, +the n-th child of its parent + +`E:nth-child(n)` +[an E element, the n-th child of its parent, +counting from the last one]{.micro} `E:nth-last-child(n)` + +[an E element, +the n-th sibling of its type]{.micro} `E:nth-of-type(n)` + +[an E element, +the n-th sibling of its type, +counting from the last one]{.micro} `E:nth-last-of-type(n)` + +[an E element that is the document root, +i.e. html]{.micro} `E:root` + +--- + +--- + +Structural pseudo-classes +------------------------- + +[an E element, +first child of its parent]{.micro} `E:first-child` + +[an E element, +first sibling of its type]{.micro} `E:first-of-type` + +[an E element, +last child of its parent]{.micro} `E:last-child ` + +[an E element, +last sibling of its type]{.micro} `E:last-of-type` + +[an E element, +only child of its parent]{.micro} `E:only-child` + +[an E element, +only sibling of its type]{.micro} `E:only-of-type` + +[an E element that has no children +(including text nodes)]{.micro} `E:empty` + +--- + +--- + +Pseudo-classes +-------------- + +[matches a link E when E is a link +and not visited, hovered over focused on or active]{.micro} `E:link` + +[the href target of the link E has been visited]{.micro} `E:visited` + +[the link E has been activated]{.micro} `E:active` + +[any element E +when hovered over with a mouse]{.micro} `E:hover` + +[the link or form control E +when tabbed to with a keyboard]{.micro} `E:focus` + +[element E is the fragment in the referring URI]{.micro} `E:target` + +[an element of type E in language "fr"]{.micro} `E:lang(fr)` + +--- + +--- + +Forms & [Pseudo-elements]{style="white-space: nowrap"} +------------------------------------------------------ + +[a user interface element E +which is enabled]{.micro} `E:enabled` + +[a user interface element E +which is disabled ]{.micro} `E:disabled` + +[a user interface element E +which is checked]{.micro} `E:checked` + +[the first formatted line of an E element]{.micro} `E::first-line` + +[the first formatted letter of an E element]{.micro} `E::first-letter` + +[generated content before an E element]{.micro} `E::before` + +[generated content after an E element]{.micro} `E::after` + +[http://www.w3.org/TR/css3-selectors/]{.micro} diff --git a/templates/footer.html b/templates/footer.html new file mode 100644 index 0000000..308b1d0 --- /dev/null +++ b/templates/footer.html @@ -0,0 +1,2 @@ + + diff --git a/templates/header.html b/templates/header.html new file mode 100644 index 0000000..d8f909c --- /dev/null +++ b/templates/header.html @@ -0,0 +1,11 @@ + + + + +pocket book + + + + + + -- cgit v1.2.3