summaryrefslogtreecommitdiff
path: root/pocketCSS.md
blob: 527feb0b9cebb89ed844cef3af8127430be9ab71 (plain)

dinky pocket bookCSS Selectors



Simple selectors

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

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