From 200842a3afd8a55b79402d4a75c3c828cdaa3f98 Mon Sep 17 00:00:00 2001 From: Jonas Smedegaard Date: Sun, 17 Sep 2017 16:08:12 +0200 Subject: Minimally convert demo pages to Markdown. --- pocketCSS.md | 182 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 182 insertions(+) create mode 100644 pocketCSS.md (limited to 'pocketCSS.md') diff --git a/pocketCSS.md b/pocketCSS.md new file mode 100644 index 0000000..43f7d54 --- /dev/null +++ b/pocketCSS.md @@ -0,0 +1,182 @@ +

dinky pocket bookCSS Selectors

+ +
+

This book belongs to:



+
+
+ +--- + +--- + +

Simple selectors

+ +

assume throughout that E and F are elements, they can have attribute foo e.g. <e foo="bar"> 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 +* +

+

type (or element) selector +E +

+

ID selector an E element with ID equal to "myid", e.g. <e id="myid"> +E#myid +

+

class selector an E element whose class is "myclass", e.g. <e class="myclass"> +E.myclass +

+ +--- + +--- + +

Combinators & negation

+

descendant combinator to style an F element, which is a descendant of an E element +E F +

+

child combinator an F element which is the direct child of an E element +E > F +

+

adjacent sibling combinator an F element that is immediately preceded by an E element +E + F +

+

general sibling combinator an F element preceded at some point by an E element +E ~ F +

+

negation pseudo-class an E element that does not match simple selector s +E:not(s) +

+ +--- + +--- + +

Attribute selectors

+

element E with a "foo" attribute +E[foo] +

+

E’s attribute foo, value exactly equal to bar +E[foo="bar"] +

+

E’s attribute foo, value is whitespace-separated values, one of which is exactly "bar" +E[foo~="bar"] +

+

E’s attribute foo, value begins exactly "bar" +E[foo^="bar"] +

+

E’s attribute foo, value ends exactly "bar" +E[foo$="bar"] +

+

E’s attribute foo, value contains substring "bar" +E[foo*="bar"] +

+

E’s attribute foo has a hyphen-separated list of values beginning (from the left) with "en" +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 +E:nth-last-child(n) +

+

an E element, the n-th sibling of its type +E:nth-of-type(n) +

+ +

an E element, the n-th sibling of its type, counting from the last one +E:nth-last-of-type(n) +

+

an E element that is the document root, i.e. html +E:root +

+ +--- + +--- + +

Structural pseudo-classes

+ +

an E element, first child of its parent +E:first-child +

+

an E element, first sibling of its type +E:first-of-type +

+

an E element, last child of its parent +E:last-child +

+

an E element, last sibling of its type +E:last-of-type +

+

an E element, only child of its parent +E:only-child +

+

an E element, only sibling of its type +E:only-of-type +

+

an E element that has no children (including text nodes) +E:empty +

+ +--- + +--- + +

Pseudo-classes

+

matches a link E when E is a link and not visited, hovered over focused on or active +E:link +

+

the href target of the link E has been visited +E:visited +

+

the link E has been activated +E:active +

+

any element E when hovered over with a mouse +E:hover +

+

the link or form control E when tabbed to with a keyboard +E:focus +

+

element E is the fragment in the referring URI +E:target +

+

an element of type E in language "fr" +E:lang(fr) +

+ +--- + +--- + +

Forms & Pseudo-elements

+

a user interface element E which is enabled +E:enabled +

+

a user interface element E which is disabled +E:disabled +

+

a user interface element E which is checked +E:checked +

+

the first formatted line of an E element +E::first-line +

+

the first formatted letter of an E element +E::first-letter +

+

generated content before an E element +E::before +

+

generated content after an E element +E::after +

+ +

http://www.w3.org/TR/css3-selectors/

-- cgit v1.2.3