brian-watkins / elm-spec / Spec.Markup.Selector

Build abstract descriptions that can be used to select HTML elements or an HTML document.

Build Selectors


type Selector a

An abstract description of some aspect of an HTML document, usually an HTML element.


type Element

A kind of selector that pertains only to HTML elements.

by : List Characteristic -> a -> ( Selector Element, a )

Generate a selector that matches HTML elements with the given characteristics.

descendantsOf : List Characteristic -> ( Selector Element, a ) -> ( Selector Element, a )

Generate a selector that matches HTML elements descending from any HTML elements with the given characteristics.

For example,

descendantsOf [ tag "div" ] << by [ tag "span" ]

will match all <span> that are inside a <div>. You may chain descendantsOf selectors using << but the chain must terminate with a by selector.


type Object

A kind of selector that pertains only to a specific item.

document : Spec.Step.Context model -> ( Selector Object, Spec.Step.Context model )

Generate a selector that matches the HTML document.

This is used primarily in conjunction with Spec.Markup.target to trigger document-level events.

For example,

Spec.when "a document level mouse click is triggered"
  [ Spec.Markup.target << document
  , Spec.Markup.Event.click
  ]

The document selector only works with Spec.Markup.target, which is to say that you cannot observe the document to make claims about it.

toString : Selector a -> String

Convert a Selector to a string.

For those selectors of type Selector Element, the resulting string will be in the style of a CSS selector.

Define Characteristics


type Characteristic

A selector is built from one or more characteristics.

id : String -> Characteristic

Generate a characteristic that belongs to elements having an id attribute with the given value.

tag : String -> Characteristic

Generate a characteristic that belongs to elements having the given tag name.

For example,

tag "div"

applies to HTML <div> elements.

class : String -> Characteristic

Generate a characteristic that belongs to elements with the given CSS class.

For example,

class "fun-class"

applies to elements to which the CSS class fun-class has been applied.

attribute : ( String, String ) -> Characteristic

Generate a characteristic that belongs to elements with the given (name, value) pair.

For example,

attribute ( "data-some-attr", "some-value" )

applies to elements having an attribute named data-some-attr with the value some-value.

attributeName : String -> Characteristic

Generate a characteristic that belongs to elements with the given attribute.

For example,

attributeName "data-some-attr"

applies to elements having an attribute names data-some-attr.