Selector for an article element.
Selector for a main element.
Apply global CSS to things like foreign DOM structures (e.g. generated from markdown) where you cannot add attributes.
This module relies on CSS selectors which are globally scoped and
bad for maintainability,
so definitely avoid using this module except when there is no reasonable way
do to it using Style instead!
global
[ class "login-form-button"
[ fontWeight normal
, color (rgb 128 64 32)
]
]An id selector.
global
[ id "nav-bar"
[ width 960 px
, backgroundColor (rgb 123 42 208)
]
]A custom selector. Use this for things like attribute selectors and universal selectors.
global
[ selector "* [lang^=en]"
[ textDecoration underline
, color (rgb 7 7 7)
]
]A * selector.
class "Foo"
[ children
[ everything
[ color (rgb 14 15 16)
, borderRadius (px 5)
]
]
]...compiles to:
.Foo > * {
color: rgb(14, 15, 16);
border-radius: 5px;
}Combines media queries into a @media rule.
global
[ media [ only screen [ Media.minWidth (px 300) ] ]
[ footer [ Css.maxWidth (px 300) ] ]
]The above code translates into the following CSS.
@media screen and (min-width: 300px) {
footer {
max-width: 300px;
}
}Manually specify a @media rule using a List of strings.
mediaQuery [ "screen and (min-width: 320px)", "screen and (max-height: 400px)" ]
[ body [ fontSize (px 14) ] ]The above code translates into the following CSS.
@media screen and (min-width: 320px), screen and (max-height: 400px) {
body {
font-size: 14px;
}
}Apply styles in a list of snippets to the direct children of a selector
typeSelector "div"
[ children
[ typeSelector "p"
[ fontSize (px 14)
]
]
]The above code translates into the following CSS.
div > p {
font-size: 14px;
}Apply styles in a list of snippets to the descendants of a selector
typeSelector "div"
[ descendants
[ typeSelector "p"
[ fontSize (px 14)
]
]
]The above code translates into the following CSS.
div p {
font-size: 14px;
}Apply styles in a list of snippets to the adjacent siblings of a selector
typeSelector "div"
[ adjacentSiblings
[ typeSelector "p"
[ fontSize (px 14)
]
]
]The above code translates into the following CSS.
div + p {
font-size: 14px;
}Apply styles in a list of snippets to the general siblings of a selector
typeSelector "div"
[ generalSiblings
[ typeSelector "p"
[ fontSize (px 14)
]
]
]The above code translates into the following CSS.
div ~ p {
font-size: 14px;
}Apply a list of styles to multiple selectors
each [ typeSelector "div", typeSelector "p" ]
[ fontSize (px 14)
]The above code translates into the following CSS.
div {
font-size: 14px;
}
p {
font-size: 14px;
}Apply styles to the current selector plus an attribute selector
typeSelector "div"
[ fontSize (px 14)
, withAttribute "data-some-attribute"
[ display none
]
, withAttribute "data-hello=world"
[ color red
]
]The above code translates into the following CSS.
div {
font-size: 14px;
}
div[data-some-attribute] {
display: none;
}
div[data-hello=world] {
color: red;
}Apply styles to the current selector plus an additional class
typeSelector "div"
[ fontSize (px 14)
, withClass "is-bold"
[ fontWeight bold
]
]The above code translates into the following CSS.
div {
font-size: 14px;
}
div.is-bold {
font-weight: bold;
}Define a custom element.
global
[ typeSelector "aside" [ display block ]
]...outputs
aside {
display: block;
}Selector for a html element.
Selector for a body element.
Selector for an article element.
Selector for a header element.
Selector for an h1 element.
Selector for an h2 element.
Selector for an h3 element.
Selector for an h4 element.
Selector for an h5 element.
Selector for an h6 element.
Selector for a section element.
Selector for a details element.
Selector for a summary element.
Selector for a div element.
Selector for an hr element.
Selector for an li element.
Selector for a main element.
Selector for an ol element.
Selector for a p element.
Selector for a ul element.
Selector for a pre element.
Selector for a dl element.
<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl>Selector for a dt element.
<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt>Selector for a dd element.
<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd>Selector for a blockquote element.
Selector for an <a> element.
Selector for a code element.
Selector for a small element.
Selector for a span element.
Selector for a strong element.
Selector for a i element.
Selector for a em element.
Selector for a img element.
Selector for an audio element.
Selector for a video element.
Selector for a canvas element.
Selector for a caption element.
Selector for a col element.
Selector for a colgroup element.
Selector for a table element.
Selector for a tbody element.
Selector for a td element.
Selector for a tfoot element.
Selector for a th element.
Selector for a thead element.
Selector for a tr element.
Selector for a button element.
Selector for a fieldset element.
Selector for a form element.
Selector for an input element.
Selector for a label element.
Selector for a legend element.
Selector for an optgroup element.
Selector for an option element.
Selector for a progress element.
Selector for a select element.
Selector for a textarea element.
Selector for a svg element.
Selector for a path element.
Selector for a rect element.
Selector for a circle element.
Selector for a ellipse element.
Selector for a line element.
Selector for a polyline element.
Selector for a polygon element.
Add global styles to the page. This compiles directly to a
<style>element.