Everything related to CSS selectors - standard selectors, attribute selectors, pseudoelement selectors, functions for the compiler etc.
Everything related to CSS selectors - standard selectors, attribute selectors, pseudoelement selectors, functions for the compiler etc.
(attribute-selector-fn compiles-to attribute subvalue)(attribute-selector-fn compiles-to tag attribute subvalue)Creates a CSSAttributeSelector record.
Creates a CSSAttributeSelector record.
(create-pseudoclassfn-record pseudoclass argument)Given a CSS pseudoclass for compilation and an argument, creates a CSSPseudoclassFn record with the pseudoclass and argument.
Given a CSS pseudoclass for compilation and an argument, creates a CSSPseudoclassFn record with the pseudoclass and argument.
(css-class? x)Returns true if the argument is a keyword, a string or a symbol and (name argument) starts with ".".
Returns true if the argument is a keyword, a string or a symbol and (name argument) starts with ".".
(css-id? x)Returns true if the argument is a keyword, a string or a symbol and (name argument) starts with "#".
Returns true if the argument is a keyword, a string or a symbol and (name argument) starts with "#".
(defattributeselector selector-name compiles-to)Attribute selectors select all descendant elements containing a given attribute, of which the value matches a given substring. All attribute selectors have different conditions for matching. Dashes count as words separators. By attributes, it is meant html attributes, e.g.: div[class~="info"]
Usage: (defattributeselector contains-word "~=") => #'tornado.selectors/contains-word (contains-word :direction "reverse") => #tornado.types.CSSAttributeSelector{:compiles-to "~=" :attribute :direction :subvalue "reverse"}
[attribute="value"]: Selects all descendant elements which have a given parameter with a given value. In code: <has-val>
With an html tag: a[attribute="value"]: Selects all descendants of a html tag which have a given parameter with a given value.
[attribute~="value"]: Selects all descendant elements which have a given parameter with a value containing a given word (not substring, word). In code: <contains-word>
[attribute|="value"]: Selects all descendant elements which have a given parameter with a value starting with a given word (not substring, word). In code: <starts-with-word>
[attribute^="value"]: Selects all descendant elements which have a given parameter with a value starting with a given substring (unlike the "|=" selector, the substring does not have to be a whole word. In code: <starts-with>
[attribute$="value"]: Selects all descendant elements which have a given parameter with a value ending with a given substring. The substring does not have to be a whole word. In code: <ends-with>
[attribute*="value"]: Selects all descendant elements which have a given parameter with a value containing a given substring. (unlike the "~=" selector, the substring does not have to be a whole word). In code: <contains-subs>
Attribute selectors select all descendant elements containing a given attribute,
of which the value matches a given substring. All attribute selectors have
different conditions for matching. Dashes count as words separators.
By attributes, it is meant html attributes, e.g.: div[class~="info"]
Usage:
(defattributeselector contains-word "~=")
=> #'tornado.selectors/contains-word
(contains-word :direction "reverse")
=> #tornado.types.CSSAttributeSelector{:compiles-to "~="
:attribute :direction
:subvalue "reverse"}
[attribute="value"]:
Selects all descendant elements which have a given parameter with a given value.
In code: <has-val>
- - - - - - - - - - - -
With an html tag:
a[attribute="value"]:
Selects all descendants of a html tag which have a given parameter
with a given value.
[attribute~="value"]:
Selects all descendant elements which have a given parameter with a value
containing a given word (not substring, word).
In code: <contains-word>
[attribute|="value"]:
Selects all descendant elements which have a given parameter with a value
starting with a given word (not substring, word).
In code: <starts-with-word>
[attribute^="value"]:
Selects all descendant elements which have a given parameter with a value
starting with a given substring (unlike the "|=" selector, the substring
does not have to be a whole word.
In code: <starts-with>
[attribute$="value"]:
Selects all descendant elements which have a given parameter with a value
ending with a given substring. The substring does not have to be a whole word.
In code: <ends-with>
[attribute*="value"]:
Selects all descendant elements which have a given parameter with a value
containing a given substring. (unlike the "~=" selector, the substring does
not have to be a whole word).
In code: <contains-subs>(defcombinatorselector selector-name compiles-to)Defines a combinator selector function which describes relationships between its arguments depending on the selector type:
:#abc :.def is the default combinator selector - descendant selector. Affects all children with a class .def.
child-selector ">": is active when the given selectors are every of them a direct child of the previous one.
adjacent-sibling (selector) "+": is active when the given html blocks elements or elements with a given class/id connected with the "+" sign are adjacent siblings.
general-sibling (selector) "~" is active when the given selectors are on the same level of nesting; they do not have to be adjacent necessarily.
Usage: [:.abc [:.def (child-selector :p :#ghi)]] compiles to ".abc .def, .abc > p > #ghi"
Defines a combinator selector function which describes relationships between its
arguments depending on the selector type:
:#abc :.def is the default combinator selector - descendant selector. Affects all
children with a class .def.
child-selector ">": is active when the given selectors are every of them a direct
child of the previous one.
adjacent-sibling (selector) "+": is active when the given html blocks elements or
elements with a given class/id connected with the "+" sign are adjacent siblings.
general-sibling (selector) "~" is active when the given selectors are on the same
level of nesting; they do not have to be adjacent necessarily.
Usage: [:.abc
[:.def (child-selector :p :#ghi)]]
compiles to ".abc .def, .abc > p > #ghi"(defpseudoclass pseudoclass)(defpseudoclass identifier css-pseudoclass)Defines a CSS pseudoclass. A CSS pseudoclass can activate some CSS properties on a css-class/css-id/html-element based on some current special state of the element.
For example, hover: (defpseudoclass hover) When compiling a selectors sequence, e.g. [:.abc :#def hover], the resulting CSS selectors sequence will look like this: ".abc #def:hover".
So, what does it even do? We can give the element a special value on hover: ... [:a hover {:color :blue} ...] - when we hover over a link with our mouse, the text color of the link will turn blue until we put our mouse away.
Defpseudoclass can also take 2 parameters, where the 2nd one will be the translation to CSS to avoid collisions between Clojure and CSS - e.g.(defpseudolass css-empty "empty").
Defines a CSS pseudoclass. A CSS pseudoclass can activate some CSS properties on
a css-class/css-id/html-element based on some current special state of the element.
For example, hover: (defpseudoclass hover)
When compiling a selectors sequence, e.g. [:.abc :#def hover], the resulting CSS
selectors sequence will look like this: ".abc #def:hover".
So, what does it even do? We can give the element a special value on hover:
... [:a hover {:color :blue} ...] - when we hover over a link with our mouse, the
text color of the link will turn blue until we put our mouse away.
Defpseudoclass can also take 2 parameters, where the 2nd one will be the translation
to CSS to avoid collisions between Clojure and CSS -
e.g.(defpseudolass css-empty "empty").(defpseudoclassfn pseudoclass)(defpseudoclassfn pseudoclass compiles-to)Creates a special CSS pseudoclass function, which compiles similarly as a standard CSS pseudoclass, but it is pseudoclass function with an argument.
For example. if you wanted to only select every n-th argument: (defpseudoclassfn nth-child) (nth-child :odd) ... compiles to "<parent>:nth-child(odd)" (nth-child "3n+1") ... compiles to "<parent>:nth-child(3n+1)"
Or if you wanted to show something based on the current language of the browser: (defpseudoclass lang) (lang "en") ... compiles to "<parent>:lang(en)"
To avoid collisions with some Clojure functions, you can give a second argument to defpseudoclassfn for a different translation to CSS: (defpseudoclass css-not "not") (css-not :p) ... compiles-to "not(p)", which selects all descendants which are not a paragraph.
Creates a special CSS pseudoclass function, which compiles similarly as a standard CSS pseudoclass, but it is pseudoclass function with an argument. For example. if you wanted to only select every n-th argument: (defpseudoclassfn nth-child) (nth-child :odd) ... compiles to "<parent>:nth-child(odd)" (nth-child "3n+1") ... compiles to "<parent>:nth-child(3n+1)" Or if you wanted to show something based on the current language of the browser: (defpseudoclass lang) (lang "en") ... compiles to "<parent>:lang(en)" To avoid collisions with some Clojure functions, you can give a second argument to defpseudoclassfn for a different translation to CSS: (defpseudoclass css-not "not") (css-not :p) ... compiles-to "not(p)", which selects all descendants which are not a paragraph.
(defpseudoelement pseudoelement)Defines a CSS pseudoelement. A CSS pseudoelement activates some CSS properties on a special part of a css-class/css-id/html-element.
For example, first-letter: (defpseudoclass first-letter) When compiling a selectors sequence, e.g. [:.abc :#def first-letter], the resulting CSS selectors sequence will look like this: ".abc #def::first-letter".
So, what does it even do? We can give the first letter of an element a special value: ... [:.abc :p first-letter {:font-size (u/px 60)} ...] - this causes the first letter of every paragraph in an element with class .abc to have the first letter significantly bigger than the rest of the paragraph.
Defines a CSS pseudoelement. A CSS pseudoelement activates some CSS properties on
a special part of a css-class/css-id/html-element.
For example, first-letter: (defpseudoclass first-letter)
When compiling a selectors sequence, e.g. [:.abc :#def first-letter], the resulting CSS
selectors sequence will look like this: ".abc #def::first-letter".
So, what does it even do? We can give the first letter of an element a special value:
... [:.abc :p first-letter {:font-size (u/px 60)} ...] - this causes the first letter
of every paragraph in an element with class .abc to have the first letter significantly
bigger than the rest of the paragraph.(has-attr attribute)(has-attr tag attribute)An attribute selector which selects all elements which have a given attribute with any value, or all html elements on/below the current nested selectors level which have a given attribute with any value.
An attribute selector which selects all elements which have a given attribute with any value, or all html elements on/below the current nested selectors level which have a given attribute with any value.
(html-tag? x)Returns true if the argument is a keyword, a string or a symbol and represents an existing html tag.
Returns true if the argument is a keyword, a string or a symbol and represents an existing html tag.
(id-class-tag? x)Returns true if the argument is a keyword, a string or a symbol and represents some of a css-class, css-id or an html-tag.
Returns true if the argument is a keyword, a string or a symbol and represents some of a css-class, css-id or an html-tag.
(make-combinator-fn compiles-to & children)Creates a CSSCombinator record.
Creates a CSSCombinator record.
(selector? x)Returns true if x is a selector of any kind (attribute, combinator, pseudoclass, pseudoclassfn, pseudoelement, special selector
Returns true if x is a selector of any kind (attribute, combinator, pseudoclass, pseudoclassfn, pseudoelement, special selector
(starts-with-word attribute subvalue)(starts-with-word tag attribute subvalue)cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |