@spec selector(selector()) :: binary()

Accepts a string, atom, keyword list, 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> HtmlQuery.Css.selector(".profile[test-role='new-members']")
".profile[test-role='new-members']"

atom-syntax

Atom syntax

When given an atom, converts the atom to a string, without converting underscores to dashes.

iex> HtmlQuery.Css.selector(:p)
"p"

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.:

HtmlQuery.Css.selector(test_role: "new-members")
HtmlQuery.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> HtmlQuery.Css.selector(test_role: "new-members")
"[test-role='new-members']"

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

iex> HtmlQuery.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> HtmlQuery.Css.selector(p: [class: "profile", test_role: "new-members"])
"p[class='profile'][test-role='new-members']"

list-syntax

List syntax

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

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

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