dinky pocket book

CSS Selectors
=============

---

---

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