diff options
Diffstat (limited to 'pocketCSS.md')
| -rw-r--r-- | pocketCSS.md | 21 |
1 files changed, 13 insertions, 8 deletions
diff --git a/pocketCSS.md b/pocketCSS.md index 43f7d54..05acdf7 100644 --- a/pocketCSS.md +++ b/pocketCSS.md @@ -1,4 +1,4 @@ -<h1><span>dinky pocket book</span>CSS Selectors</h1> +# <span>dinky pocket book</span>CSS Selectors <div class="footer"> <p>This book belongs to:</p><br><br> @@ -9,7 +9,7 @@ --- -<h2>Simple selectors</h2> +## Simple selectors <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> @@ -31,7 +31,8 @@ --- -<h2>Combinators <abbr class="amp" title="and">&</abbr> negation</h2> +## 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> <code>E F</code> </p> @@ -52,7 +53,8 @@ --- -<h2>Attribute selectors</h2> +## Attribute selectors + <p><span class="micro">element E with a "foo" attribute</span> <code>E[foo]</code> </p> @@ -78,7 +80,8 @@ --- -<h2>Structural pseudo-classes</h2> +## 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> <code>E:nth-child(n)</code> @@ -101,7 +104,7 @@ --- -<h2>Structural pseudo-classes</h2> +## Structural pseudo-classes <p><span class="micro">an E element, first child of its parent</span> <code>E:first-child</code> @@ -129,7 +132,8 @@ --- -<h2>Pseudo-classes</h2> +## 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> <code>E:link</code> </p> @@ -156,7 +160,8 @@ --- -<h2>Forms <abbr class="amp" title="and">&</abbr> <span style="white-space: nowrap">Pseudo-elements</span></h2> +## 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> <code>E:enabled</code> </p> |