diff options
Diffstat (limited to 'index.md')
| -rw-r--r-- | index.md | 241 |
1 files changed, 163 insertions, 78 deletions
@@ -1,5 +1,7 @@ -[dinky pocket book]{}CSS Selectors -================================== +dinky pocket book + +CSS Selectors +============= --- @@ -10,22 +12,30 @@ Simple selectors assume throughout that `E` and `F` are elements, they can have attribute `foo` -e.g. `<e foo="bar">`{style="white-space: nowrap"} +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]{.micro} `*` +**universal selector** match any element + + * + +**type** (or element) selector + + E -[**type** (or element) selector]{.micro} `E` +**ID selector** an E element with ID equal to "myid", +e.g.`<e id="myid">` -[**ID selector** an E element with ID equal to "myid", -e.g.`<e id="myid">`]{.micro} `E#myid` + E#myid -[**class selector** an E element whose class is "myclass", -e.g.`<e class="myclass">`]{.micro} `E.myclass` +**class selector** an E element whose class is "myclass", +e.g. `<e class="myclass">` + + E.myclass --- @@ -34,20 +44,30 @@ e.g.`<e class="myclass">`]{.micro} `E.myclass` Combinators & negation ---------------------- -[**descendant combinator** to style an F element, -which is a descendant of an E element]{.micro} `E F` +**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 -[**child combinator** an F element -which is the direct child of an E element]{.micro} `E > F` + E > F -[**adjacent sibling combinator** an F element -that is immediately preceded by an E element]{.micro} `E + F` +**adjacent sibling combinator** an F element +that is immediately preceded by an E element -[**general sibling combinator** an F element -preceded at some point by an E element]{.micro} `E ~ F` + E + F -[**negation pseudo-class** an E element -that does not match simple selector `s`]{.micro} `E:not(s)` +**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) --- @@ -56,26 +76,40 @@ that does not match simple selector `s`]{.micro} `E:not(s)` Attribute selectors ------------------- -[element E with a "foo" attribute]{.micro} `E[foo]` +element E with a "foo" attribute -[E’s attribute `foo`, -value exactly equal to `bar`]{.micro} `E[foo="bar"]` + E[foo] -[E’s attribute `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"]{.micro} `E[foo~="bar"]` +one of which is exactly "bar" + + E[foo~="bar"] -[E’s attribute `foo`, -value begins exactly "bar"]{.micro} `E[foo^="bar"]` +E’s attribute `foo`, +value begins exactly "bar" -[E’s attribute `foo`, -value ends exactly "bar"]{.micro} `E[foo$="bar"]` + E[foo^="bar"] -[E’s attribute `foo`, -value contains substring "bar"]{.micro} `E[foo*="bar"]` +E’s attribute `foo`, +value ends exactly "bar" -[E’s attribute `foo` has a hyphen-separated list of values -beginning (from the left) with "en"]{.micro} `E[foo|="en"]` + 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"] --- @@ -91,19 +125,28 @@ in all following cases 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)` + E:nth-child(n) -[an E element, -the n-th sibling of its type]{.micro} `E:nth-of-type(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 -[an E element, + 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)` +counting from the last one + + E:nth-last-of-type(n) -[an E element that is the document root, -i.e. html]{.micro} `E:root` +an E element that is the document root, +i.e. html + + E:root --- @@ -112,26 +155,40 @@ 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 child of its parent -[an E element, -first sibling of its type]{.micro} `E:first-of-type` + E:first-child -[an E element, -last child of its parent]{.micro} `E:last-child ` +an E element, +first sibling of its type -[an E element, -last sibling of its type]{.micro} `E:last-of-type` + E:first-of-type -[an E element, -only child of its parent]{.micro} `E:only-child` +an E element, +last child of its parent + + E:last-child -[an E element, -only sibling of its type]{.micro} `E:only-of-type` +an E element, +last sibling of its type -[an E element that has no children -(including text nodes)]{.micro} `E:empty` + 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 --- @@ -140,45 +197,73 @@ only sibling of its type]{.micro} `E:only-of-type` Pseudo-classes -------------- -[matches a link E when E is a link -and not visited, hovered over focused on or active]{.micro} `E:link` +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 -[the href target of the link E has been visited]{.micro} `E:visited` + E:visited -[the link E has been activated]{.micro} `E:active` +the link E has been activated -[any element E -when hovered over with a mouse]{.micro} `E:hover` + E:active -[the link or form control E -when tabbed to with a keyboard]{.micro} `E:focus` +any element E +when hovered over with a mouse -[element E is the fragment in the referring URI]{.micro} `E:target` + E:hover -[an element of type E in language "fr"]{.micro} `E:lang(fr)` +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]{style="white-space: nowrap"} ------------------------------------------------------- +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 -[a user interface element E -which is enabled]{.micro} `E:enabled` + E::first-line -[a user interface element E -which is disabled ]{.micro} `E:disabled` +the first formatted letter of an E element -[a user interface element E -which is checked]{.micro} `E:checked` + E::first-letter -[the first formatted line of an E element]{.micro} `E::first-line` +generated content before an E element -[the first formatted letter of an E element]{.micro} `E::first-letter` + E::before -[generated content before an E element]{.micro} `E::before` +generated content after an E element -[generated content after an E element]{.micro} `E::after` + E::after -[http://www.w3.org/TR/css3-selectors/]{.micro} +<http://www.w3.org/TR/css3-selectors/> |