View Source Pages.Css (Pages v0.2.4)

Constructs CSS selectors via Elixir data structures. See selector/1 for details.

Link to this section Summary

Functions

query(input) deprecated

Accepts a string, atom, or list and returns a CSS string.

Link to this section Types

@type selector() :: binary() | atom() | list()

Link to this section Functions

This function is deprecated. Use `selector/1` instead.
@spec query(selector()) :: binary()
@spec selector(selector()) :: binary()

Accepts a string, atom, or list and returns a CSS string.

string-syntax

String syntax

When given a string, returns the string. This is useful when you don't know if a selector is already a string.

iex> Pages.Css.selector(".profile[test-role='new-members']")
".profile[test-role='new-members']"

keyword-list-syntax

Keyword list syntax

The keyword list syntax is intentionally limited; complex selectors are more easily written as strings.

The keyword list syntax makes it a bit eaiser to write simple selectors or selectors that use variables: e.g.:

Pages.Css.selector(test_role: "new-members")
Pages.Css.selector(id: some_variable)

Keys are expected to be atoms and will be dasherized (foo_bar -> foo-bar). Values are expected to be strings or another keyword list.

A key/value pair will be converted to an attribute selector:

iex> Pages.Css.selector(test_role: "new-members")
"[test-role='new-members']"

A keyword list will be converted to a list of attribute selectors:

iex> Pages.Css.selector(class: "profile", test_role: "new-members")
"[class='profile'][test-role='new-members']"

(Note that the CSS selector .profile expands to [class~='profile'] which is not equivalent to [class='profile']. The keyword list syntax will not generate ~= selectors so you should use a string selector such as ".profile[test-role='new-members']" instead if you want ~= semantics. See the CSS spec for details.)

When the value is a keyword list, the key is converted to an element selector:

iex> Pages.Css.selector(p: [class: "profile", test_role: "new-members"])
"p[class='profile'][test-role='new-members']"

regular-non-keyword-list-syntax

Regular (non-keyword) list syntax

The list syntax is intentionally limited; complex selectors are more easily written as strings.

When the value is a regular (non-keyword) list, atoms are converted to element selectors and keyword lists are converted as described above.

iex> Pages.Css.selector([[p: [class: "profile", test_role: "new-members"]], :div, [class: "tag"]])
"p[class='profile'][test-role='new-members'] div [class='tag']"