From e8ea27d8fb609215f3b59b105c498dd7e783cc0f Mon Sep 17 00:00:00 2001 From: Simon Willison Date: Sun, 31 Mar 2013 18:11:24 +0100 Subject: Adding the CSS selector pocket book I wrote a while back and recently dug out of the internet archive --- artifacts/pocketwiki_css3selectors.pdf | Bin 0 -> 45536 bytes pocketCSS.html | 216 +++++++++++++++++++++++++++++++++ 2 files changed, 216 insertions(+) create mode 100644 artifacts/pocketwiki_css3selectors.pdf create mode 100644 pocketCSS.html diff --git a/artifacts/pocketwiki_css3selectors.pdf b/artifacts/pocketwiki_css3selectors.pdf new file mode 100644 index 0000000..0dbc538 Binary files /dev/null and b/artifacts/pocketwiki_css3selectors.pdf differ diff --git a/pocketCSS.html b/pocketCSS.html new file mode 100644 index 0000000..91ca8af --- /dev/null +++ b/pocketCSS.html @@ -0,0 +1,216 @@ + + + + + + pocket wiki - Terminal commands + + + + + + + + + + + + +
+
+
+

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