# ui.query | NiceGUI

[Button: icon:menu]

[](/)

[Installation](/#installation)

[Features](/#features)

[Demos](/#demos)

[Documentation](/documentation)

[Examples](/examples)

[Why?](/#why)

[Button]

[Button]

[](https://github.com/zauberzeug/nicegui/)

[Button: icon:more_vert]

# ui.*query*

## Query Selector

To manipulate elements like the document body, you can use the `ui.query` function.
With the query result you can add classes, styles, and attributes like with every other UI element.
This can be useful for example to change the background color of the page (e.g. `ui.query('body').classes('bg-green')`).

:selector: the CSS selector (e.g. "body", "#my-id", ".my-class", "div > p")

main.py

[Button]

````python
from nicegui import ui

def set_background(color: str) -> None:
    ui.query('body').style(f'background-color: {color}')

ui.button('Blue', on_click=lambda: set_background('#ddeeff'))
ui.button('Orange', on_click=lambda: set_background('#ffeedd'))

ui.run()
````

## Set background gradient

It's easy to set a background gradient, image or similar.
See [w3schools.com](https://www.w3schools.com/cssref/pr_background-image.php) for more information about setting background with CSS.

main.py

[Button]

````python
from nicegui import ui

ui.query('body').classes('bg-gradient-to-t from-blue-400 to-blue-100')

ui.run()
````

## Modify default page padding

By default, NiceGUI provides a built-in padding around the content of the page.
You can modify it using the class selector `.nicegui-content`.

main.py

[Button]

````python
from nicegui import ui

ui.query('.nicegui-content').classes('p-0')
with ui.column().classes('h-screen w-full bg-gray-400 justify-between'):
    ui.label('top left')
    ui.label('bottom right').classes('self-end')

ui.run()
````

## Reference

## Initializer

:selector: the CSS selector (e.g. "body", "#my-id", ".my-class", "div > p")

## Properties

**`element`**`: nicegui.elements.query.QueryElement`

The element this query belongs to.

## Methods

**`classes`**`(add: str | None = None, remove: str | None = None, toggle: str | None = None, replace: str | None = None) -> Self`

Apply, remove, toggle, or replace HTML classes.

This allows modifying the look of the element or its layout using `Tailwind <https://tailwindcss.com/>`_ or `Quasar <https://quasar.dev/>`_ classes.

Removing or replacing classes can be helpful if predefined classes are not desired.

:param add: whitespace-delimited string of classes
:param remove: whitespace-delimited string of classes to remove from the element
:param toggle: whitespace-delimited string of classes to toggle (*added in version 2.7.0*)
:param replace: whitespace-delimited string of classes to use instead of existing ones

**`props`**`(add: str | None = None, remove: str | None = None) -> Self`

Add or remove props.

This allows modifying the look of the element or its layout using `Quasar <https://quasar.dev/>`_ props.
Since props are simply applied as HTML attributes, they can be used with any HTML element.

Boolean properties are assumed ``True`` if no value is specified.

:param add: whitespace-delimited list of either boolean values or key=value pair to add
:param remove: whitespace-delimited list of property keys to remove

**`style`**`(add: str | None = None, remove: str | None = None, replace: str | None = None) -> Self`

Apply, remove, or replace CSS definitions.

Removing or replacing styles can be helpful if the predefined style is not desired.

:param add: semicolon-separated list of styles to add to the element
:param remove: semicolon-separated list of styles to remove from the element
:param replace: semicolon-separated list of styles to use instead of existing ones

**Nice**GUI

The Python UI framework that shows up in your browser.

[](https://github.com/zauberzeug/nicegui/)

[](https://discord.gg/TEpFeAaF4f)

[](https://www.reddit.com/r/nicegui/)

Resources

[Documentation](/documentation)

[Examples](/examples)

[LLM reference](/llms.txt)

[GitHub](https://github.com/zauberzeug/nicegui/)

[PyPI](https://pypi.org/project/nicegui/)

Community

[Discussions](https://github.com/zauberzeug/nicegui/discussions)

[Discord](https://discord.gg/TEpFeAaF4f)

[Reddit](https://www.reddit.com/r/nicegui/)

[Contributing](https://github.com/zauberzeug/nicegui/blob/main/CONTRIBUTING.md)

[Sponsors](https://github.com/sponsors/zauberzeug)

Legal

[Imprint](/imprint_privacy#imprint)

[Privacy](/imprint_privacy#privacy)

Made with NiceGUI by [Zauberzeug](https://zauberzeug.com)

© 2026 [Zauberzeug GmbH](https://zauberzeug.com)