How do I specify a different subject for the selector? - mootools/slick GitHub Wiki

Reversed Combinators are a classification of combinators that are the reverse of their original. They redirect the flow of selectors and combinators to travel up the node tree rather than down. Slick implements these by prepending ! to a selector or combinator.

CSS selectors are read from right to left, even reverse selectors.

The simple selector on the right defines the actual result that you are looking for. Everything further to the left filters down that list with more and more specific surrounding structure.

Note: We use the "!" quasi-namespace for our custom combinators to prevent collision with possible future standards.

Examples

Match a label that has a direct child input[disabled].
Match a label that is the direct parent of an input[disabled].

###W3C Selectors 4

$label > input[disabled]

###Reverse Combinators

input[disabled] !> label

###:has Pseudo-class

label:has(input[disabled])

###Shaun Inman CSS Qualified Selectors

label < input[disabled]

---

Match all the paragraphs that are an ancestor of a paragraph

p ! p

Match all paragraphs that are direct previous siblings of another paragraph

p !+ p

Match all paragraphs that are previous siblings of another paragraph

p !~ p

---

Match every A in a STRONG in the third TH of a TABLE

table th:nth-child(3) strong > a

Match every TABLE whose third TH contains a STRONG A

Reversed Combinators

a !> strong ! th:nth-child(3) ! table

W3C Selectors 4

$table th:nth-child(3) strong > a