**Contents** [[toc]]

## Introduction Expressions in hyperscript are a mix of familiar and new. Many of the expected operations from javascript are there: * Common literals: `1 true "this is a string" null` * List and object literals: `[1, 2, 3], {foo:"bar", [computeKey()]: computeValue()}` Most of the common comparison and mathematical operators are there as well: ```text x > 10 y == null lst.length < 5 a + b < 42 ``` There are some minor improvements to them: * Property names in object literals can contain hyphens. This is convenient for representing CSS: `add { font-weight: bold } to the #element in me` However, once you get past the basics, hyperscript starts to get a little wild. Let's start with CSS literals. ## CSS Literals Hyperscript gives you the ability to embed CSS literals directly in your code to select elements. There are four main expression types: ### ID Literals You can refer to an element by ID directly in hyperscript as follows: ```html

Click Me

``` The `#example` is an ID literal and will evaluate to the element with the given id. Here we put some text into its `innerHTML` when the top div is clicked. ### Class Literals You can refer to a group of elements by class directly in hyperscript as follows: ```html

Click Me

``` The `#example` is an ID literal and will evaluate all the elements with the class `example` on them. Here we put some text into their `innerHTML` when the top div is clicked. Note that the [put command](/commands/put) can work with collections as well as single values, so it can put the given value into all the returned elements. ### Query Literals You can refer to a group of elements by an arbitrary [CSS selector](https://www.w3schools.com/cssref/css_selectors.asp) by enclosing the selector in a `<` and `/>`: ```html

Click Me

``` This example will put "Clicked" into every div on the page! ```html

Click Me

``` This example will put "Clicked" into every div that does not have the `example` class on it. We can also refer to ``, ``, or even `<:root>`: ```html ``` This example will toggle the `data-theme='light'` property on `:root` so we can toggle css-variable values as follows: ```css :root { --bg-color: black; --text-color: white; } :root[data-theme='light'] { --bg-color: white; --text-color: black; } ``` ### Attribute Literals Finally, you can refer to an attribute with two syntaxes: ```html