dinky pocket book

# CSS Selectors

<div class="footer">
<p>This book belongs to:</p><br><br>
<hr>
</div>

---

---

## Simple selectors

<p class="micro">assume throughout that `E` and `F` are elements, they can have attribute `foo` 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 **always** case sensitive</p> 

<span class="micro">**universal selector**, match any element</span>
`*`

<span class="micro">**type** (or element) selector</span>
`E`

<span class="micro">**ID selector** an E element with ID equal to "myid", e.g. `<e id="myid">`</span>
`E#myid`

<span class="micro">**class selector** an E element whose class is "myclass", e.g. `<e class="myclass">`</span>
`E.myclass`

---

---

## Combinators <abbr class="amp" title="and">&</abbr> negation

<span class="micro">**descendant combinator** to style an F element, which is a descendant of an E element</span>
`E F`

<span class="micro">**child combinator** an F element which is the direct child of an E element</span>
`E > F`

<span class="micro">**adjacent sibling combinator** an F element that is immediately preceded by an E element</span>
`E + F`

<span class="micro">**general sibling combinator** an F element preceded at some point by an E element</span>
`E ~ F`

<span class="micro">**negation pseudo-class** an E element that does not match simple selector `s`</span>
`E:not(s)`

---

---

## Attribute selectors

<span class="micro">element E with a "foo" attribute</span>
`E[foo]`

<span class="micro">E’s attribute `foo`, value exactly equal to `bar`</span>
`E[foo="bar"]`

<span class="micro">E’s attribute `foo`, value is whitespace-separated values, one of which is exactly "bar"</span>
`E[foo~="bar"]`

<span class="micro">E’s attribute `foo`, value begins exactly "bar"</span>
`E[foo^="bar"]`

<span class="micro">E’s attribute `foo`, value ends exactly "bar"</span>
`E[foo$="bar"]`

<span class="micro">E’s attribute `foo`, value contains substring "bar"</span>
`E[foo*="bar"]`

<span class="micro">E’s attribute `foo` has a hyphen-separated list of values beginning (from the left) with "en"</span>
`E[foo|="en"]`

---

---

## Structural pseudo-classes

<p class="micro">`n` can be replaced with an expression in all following cases `n` can be (odd), (even) or expressions such as  (3n + 1)</span></p>

<span class="micro">an E element, the n-th child of its parent</span>
`E:nth-child(n)`

<span class="micro">an E element, the n-th child of its parent, counting from the last one</span>
`E:nth-last-child(n)`

<span class="micro">an E element, the n-th sibling of its type</span>
`E:nth-of-type(n)`

<span class="micro">an E element, the n-th sibling of its type, counting from the last one</span>
`E:nth-last-of-type(n)`

<span class="micro">an E element that is the document root, i.e. html</span>
`E:root`

---

---

## Structural pseudo-classes

<span class="micro">an E element, first child of its parent</span>
`E:first-child`

<span class="micro">an E element, first sibling of its type</span>
`E:first-of-type`

<span class="micro">an E element, last child of its parent</span>
`E:last-child `

<span class="micro">an E element, last sibling of its type</span>
`E:last-of-type`

<span class="micro">an E element, only child of its parent</span>
`E:only-child`

<span class="micro">an E element, only sibling of its type</span>
`E:only-of-type`

<span class="micro">an E element that has no children (including text nodes)</span>
`E:empty`

---

---

## Pseudo-classes

<span class="micro">matches a link E when E is a link and not visited, hovered over focused on or active</span>
`E:link`

<span class="micro">the href target of the link E has been visited</span>
`E:visited`

<span class="micro">the link E has been activated</span>
`E:active`

<span class="micro">any element E when hovered over with a mouse</span>
`E:hover`

<span class="micro">the link or form control E when tabbed to with a keyboard</span>
`E:focus`

<span class="micro">element E is the fragment in the referring URI</span>
`E:target`

<span class="micro">an element of type E in language "fr"</span>
`E:lang(fr)`

---

---

## Forms <abbr class="amp" title="and">&</abbr> <span style="white-space: nowrap">Pseudo-elements</span>

<span class="micro">a user interface element E which is enabled</span>
`E:enabled`

<span class="micro">a user interface element E which is disabled </span>
`E:disabled`

<span class="micro">a user interface element E which is checked</span>
`E:checked`

<span class="micro">the first formatted line of an E element</span>
`E::first-line`

<span class="micro">the first formatted letter of an E element</span>
`E::first-letter`

<span class="micro">generated content before an E element</span>   
`E::before`

<span class="micro">generated content after an E element</span>
`E::after`

<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>