diff options
Diffstat (limited to 'pocketCSS.md')
| -rw-r--r-- | pocketCSS.md | 160 |
1 files changed, 77 insertions, 83 deletions
diff --git a/pocketCSS.md b/pocketCSS.md index 05acdf7..14ea67c 100644 --- a/pocketCSS.md +++ b/pocketCSS.md @@ -14,18 +14,17 @@ <p class="micro">assume throughout that <code>E</code> and <code>F</code> are elements, they can have attribute <code>foo</code> e.g. <code style="white-space: nowrap"><e foo="bar"></code> you can replace these with any elements or attributes.</p> <p class="micro">In HTML, elements in CSS can be uppercase like these examples. In XHTML, elements must be lower case. Classes and IDs are <strong>always</strong> case sensitive</p> -<p><span class="micro"><strong>universal selector</strong>, match any element</span> +<span class="micro"><strong>universal selector</strong>, match any element</span> <code>*</code> -</p> -<p><span class="micro"><strong>type</strong> (or element) selector</span> + +<span class="micro"><strong>type</strong> (or element) selector</span> <code>E</code> -</p> -<p><span class="micro"><strong>ID selector</strong> an E element with ID equal to "myid", e.g. <code><e id="myid"></code></span> + +<span class="micro"><strong>ID selector</strong> an E element with ID equal to "myid", e.g. <code><e id="myid"></code></span> <code>E#myid</code> -</p> -<p><span class="micro"><strong>class selector</strong> an E element whose class is "myclass", e.g. <code><e class="myclass"></code></span> + +<span class="micro"><strong>class selector</strong> an E element whose class is "myclass", e.g. <code><e class="myclass"></code></span> <code>E.myclass</code> -</p> --- @@ -33,21 +32,20 @@ ## Combinators <abbr class="amp" title="and">&</abbr> negation -<p><span class="micro"><strong>descendant combinator</strong> to style an F element, which is a descendant of an E element</span> +<span class="micro"><strong>descendant combinator</strong> to style an F element, which is a descendant of an E element</span> <code>E F</code> -</p> -<p><span class="micro"><strong>child combinator</strong> an F element which is the direct child of an E element</span> + +<span class="micro"><strong>child combinator</strong> an F element which is the direct child of an E element</span> <code>E > F</code> -</p> -<p><span class="micro"><strong>adjacent sibling combinator</strong> an F element that is immediately preceded by an E element</span> + +<span class="micro"><strong>adjacent sibling combinator</strong> an F element that is immediately preceded by an E element</span> <code>E + F</code> -</p> -<p><span class="micro"><strong>general sibling combinator</strong> an F element preceded at some point by an E element</span> + +<span class="micro"><strong>general sibling combinator</strong> an F element preceded at some point by an E element</span> <code>E ~ F</code> -</p> -<p><span class="micro"><strong>negation pseudo-class</strong> an E element that does not match simple selector <code>s</code></span> + +<span class="micro"><strong>negation pseudo-class</strong> an E element that does not match simple selector <code>s</code></span> <code>E:not(s)</code> -</p> --- @@ -55,25 +53,25 @@ ## Attribute selectors -<p><span class="micro">element E with a "foo" attribute</span> +<span class="micro">element E with a "foo" attribute</span> <code>E[foo]</code> -</p> -<p><span class="micro">E’s attribute <code>foo</code>, value exactly equal to <code>bar</code></span> + +<span class="micro">E’s attribute <code>foo</code>, value exactly equal to <code>bar</code></span> <code>E[foo="bar"]</code> -</p> -<p><span class="micro">E’s attribute <code>foo</code>, value is whitespace-separated values, one of which is exactly "bar"</span> + +<span class="micro">E’s attribute <code>foo</code>, value is whitespace-separated values, one of which is exactly "bar"</span> <code>E[foo~="bar"]</code> -</p> -<p><span class="micro">E’s attribute <code>foo</code>, value begins exactly "bar"</span> + +<span class="micro">E’s attribute <code>foo</code>, value begins exactly "bar"</span> <code>E[foo^="bar"]</code> -</p> -<p><span class="micro">E’s attribute <code>foo</code>, value ends exactly "bar"</span> + +<span class="micro">E’s attribute <code>foo</code>, value ends exactly "bar"</span> <code>E[foo$="bar"]</code> -</p> -<p><span class="micro">E’s attribute <code>foo</code>, value contains substring "bar"</span> + +<span class="micro">E’s attribute <code>foo</code>, value contains substring "bar"</span> <code>E[foo*="bar"]</code> -</p> -<p><span class="micro">E’s attribute <code>foo</code> has a hyphen-separated list of values beginning (from the left) with "en"</span> + +<span class="micro">E’s attribute <code>foo</code> has a hyphen-separated list of values beginning (from the left) with "en"</span> <code>E[foo|="en"]</code> --- @@ -83,22 +81,21 @@ ## Structural pseudo-classes <p class="micro"><code>n</code> can be replaced with an expression in all following cases <code>n</code> can be (odd), (even) or expressions such as (3n + 1)</span></p> -<p><span class="micro">an E element, the n-th child of its parent</p> + +<span class="micro">an E element, the n-th child of its parent</span> <code>E:nth-child(n)</code> -</p> -<p><span class="micro">an E element, the n-th child of its parent, counting from the last one</span> + +<span class="micro">an E element, the n-th child of its parent, counting from the last one</span> <code>E:nth-last-child(n)</code> -</p> -<p><span class="micro">an E element, the n-th sibling of its type</span> + +<span class="micro">an E element, the n-th sibling of its type</span> <code>E:nth-of-type(n)</code> -</p> -<p><span class="micro">an E element, the n-th sibling of its type, counting from the last one</span> +<span class="micro">an E element, the n-th sibling of its type, counting from the last one</span> <code>E:nth-last-of-type(n)</code> -</p> -<p><span class="micro">an E element that is the document root, i.e. html</span> + +<span class="micro">an E element that is the document root, i.e. html</span> <code>E:root</code> -</p> --- @@ -106,27 +103,26 @@ ## Structural pseudo-classes -<p><span class="micro">an E element, first child of its parent</span> +<span class="micro">an E element, first child of its parent</span> <code>E:first-child</code> -</p> -<p><span class="micro">an E element, first sibling of its type</span> + +<span class="micro">an E element, first sibling of its type</span> <code>E:first-of-type</code> -</p> -<p><span class="micro">an E element, last child of its parent</span> + +<span class="micro">an E element, last child of its parent</span> <code>E:last-child </code> -</p> -<p><span class="micro">an E element, last sibling of its type</span> + +<span class="micro">an E element, last sibling of its type</span> <code>E:last-of-type</code> -</p> -<p><span class="micro">an E element, only child of its parent</span> + +<span class="micro">an E element, only child of its parent</span> <code>E:only-child</code> -</p> -<p><span class="micro">an E element, only sibling of its type</span> + +<span class="micro">an E element, only sibling of its type</span> <code>E:only-of-type</code> -</p> -<p><span class="micro">an E element that has no children (including text nodes)</span> + +<span class="micro">an E element that has no children (including text nodes)</span> <code>E:empty</code> -</p> --- @@ -134,27 +130,26 @@ ## Pseudo-classes -<p><span class="micro">matches a link E when E is a link and not visited, hovered over focused on or active</span> +<span class="micro">matches a link E when E is a link and not visited, hovered over focused on or active</span> <code>E:link</code> -</p> -<p><span class="micro">the href target of the link E has been visited</span> + +<span class="micro">the href target of the link E has been visited</span> <code>E:visited</code> -</p> -<p><span class="micro">the link E has been activated</span> + +<span class="micro">the link E has been activated</span> <code>E:active</code> -</p> -<p><span class="micro">any element E when hovered over with a mouse</span> + +<span class="micro">any element E when hovered over with a mouse</span> <code>E:hover</code> -</p> -<p><span class="micro">the link or form control E when tabbed to with a keyboard</span> + +<span class="micro">the link or form control E when tabbed to with a keyboard</span> <code>E:focus</code> -</p> -<p><span class="micro">element E is the fragment in the referring URI</span> + +<span class="micro">element E is the fragment in the referring URI</span> <code>E:target</code> -</p> -<p><span class="micro">an element of type E in language "fr"</span> + +<span class="micro">an element of type E in language "fr"</span> <code>E:lang(fr)</code> -</p> --- @@ -162,26 +157,25 @@ ## Forms <abbr class="amp" title="and">&</abbr> <span style="white-space: nowrap">Pseudo-elements</span> -<p><span class="micro">a user interface element E which is enabled</span> +<span class="micro">a user interface element E which is enabled</span> <code>E:enabled</code> -</p> -<p><span class="micro">a user interface element E which is disabled </span> + +<span class="micro">a user interface element E which is disabled </span> <code>E:disabled</code> -</p> -<p><span class="micro">a user interface element E which is checked</span> + +<span class="micro">a user interface element E which is checked</span> <code>E:checked</code> -</p> -<p><span class="micro">the first formatted line of an E element</span> + +<span class="micro">the first formatted line of an E element</span> <code>E::first-line</code> -</p> -<p><span class="micro">the first formatted letter of an E element</span> + +<span class="micro">the first formatted letter of an E element</span> <code>E::first-letter</code> -</p> -<p><span class="micro">generated content before an E element</span> + +<span class="micro">generated content before an E element</span> <code>E::before</code> -</p> -<p><span class="micro">generated content after an E element</span> + +<span class="micro">generated content after an E element</span> <code>E::after</code> -</p> <p class="micro" style="text-align: right; border-top: 1px solid #E0E0E0; margin-top: 3em"><span class="micro">http://www.w3.org/TR/css3-selectors/</span></p> |