Complements the selector by checking that the attribute is present.

Examples

iex> with_attr("input", "checked")
~s/input["checked"]/

Complements the selector by checking that the attribute has the given value.

Value can either be a value or a tuple {matcher_name, value} where matcher_name can be one of:

• :contains_word for ~=.
• :contains for *=.
• :equal for =.
• :ends_with for $=.
• :starts_with for ^=.
• :subcode for |=.

For more information on these selectors, please check MDN.

Examples

iex> with_attr("input", "type", "text")
~s/input["type"="text"]/

iex> with_attr("input", "class", {:contains_word, "hidden"})
~s/input["class"~="hidden"]/

iex> with_attr("input", "type", {:equal, "text"})
~s/input["type"="text"]/

iex> with_attr("div", "data-test", {:ends_with, "editor"})
~s/div["data-test"$="editor"]/

iex> with_attr("div", "data-test", {:starts_with, "editor"})
~s/div["data-test"^="editor"]/

iex> with_attr("main", "lang", {:subcode, "es"})
~s/main["lang"|="es"]/

Like with_attr/2 but several attributes can be passed at once.

Attributes can be passed as a map or keywords. In both cases, keys are the names of the attributes, while the keys can be:

• true for just checking that the attribute is present.
• false for checking that the attribute is not present.
• Any other value would be passed directly as attribute value to with_attr/3. Check its documentation for all the options.

Examples

iex> with_attrs("input", type: "checkbox", checked: true)
~s/input["type"="checkbox"]["checked"]/

iex> with_attrs("input", name: false, class: {:contains_word, "hola"}, "data-test": false)
~s/input["class"~="hola"]:not(["name"]):not(["data-test"])/

Add the class selector to the given one.

Examples

iex> with_class("div", "hidden")
"div.hidden"

iex> with_class("span", "flex")
"span.flex"

Checks if the selector contains the given classes.

Examples

iex> with_classes("div", ~w(flex mb-4))
"div.flex.mb-4"

iex> with_classes("span", ~w(p-1 m-2))
"span.p-1.m-2"

Adds the given id to the selector passed in.

Examples

iex> with_id("main", "main_content")
"main#main_content"

iex> with_id("div", "modal")
"div#modal"

Complements the selector by checking that it does not have the given attribute.

Examples

iex> without_attr("input", "checked")
~s/input:not(["checked"])/

Complements the selector by checking that it does not have the given attribute with the given value. Check with_attr/3 for possible values.

Examples

iex> without_attr("input", "type", "text")
~s/input:not(["type"="text"])/

iex> without_attr("input", "class", {:contains_word, "hidden"})
~s/input:not(["class"~="hidden"])/

iex> without_attr("input", "type", {:equal, "text"})
~s/input:not(["type"="text"])/

iex> without_attr("div", "data-test", {:ends_with, "editor"})
~s/div:not(["data-test"$="editor"])/

iex> without_attr("div", "data-test", {:starts_with, "editor"})
~s/div:not(["data-test"^="editor"])/

iex> without_attr("main", "lang", {:subcode, "es"})
~s/main:not(["lang"|="es"])/

Modifies the selector to check it does not have the given class.

Examples

iex> without_class("div", "hidden")
~s/div:not(.hidden)/

Modifies the selector to check it does not contain the given classes.

Examples

iex> without_classes("div", ~w(flex mb-4))
~s/div:not(.flex):not(.mb-4)/