A Pseudo Class is a special or dynamic state of an element. Pseudo Classes can be used to style elements when certain occurrences happen, such as if the element is being hovered over, or is the current element with focus.

checked

Filters check_list, radio_list, and multi_list items that are selected.

{ "item:checked", {
    text_color = { 0, 255, 0, 255 },
}}

disabled

Filters elements with the enabled attribute set to false.

{ "button:disabled", {
    background_color = { 200, 200, 200, 255 },
    text_color = { 220, 220, 220, 255 },
}}

empty

Filters elements with no children.

{ "block:empty", {
    visible = false,
}}

enabled

Filters elements with the enabled attribute set to true.

{ "button:enabled", {
    background_color = { 78, 189, 255, 255 },
    text_color = { 19, 86, 128, 255 },
}}

first_child

Filters elements that are the first child of their parent.

{ "text:first_child", {
    font_size = 18
}}

first_of_type(type)

Filters elements that are the first child of their parent that is of the selected type.

{ "block:first_of_type(text)", {
    font_size = 18
}}

focus

Filters element that is the current active/focused element.

{ "button:focus", {
    background_color = { 189, 78, 255, 255 },
}}

hover

Filters element that is currently being hovered over.

{ "button:hover", {
    background_color = { 122, 206, 253, 255 },
}}

last_child

Filters elements that are the last child of their parent.

{ "text:last_child", {
    font_size = 8
}}

last_of_type(type)

Filters elements that are the last child of their parent that is of the selected type.

{ "block:last_of_type(text)", {
    font_size = 8
}}

not(selector)

Filters elements that are not within a given selector query.

{ "text:not(text:first_child)", {
    font_size = 14
}}

nth_child(n)

Filters elements that are the nth child of their parent and n is an integer.

{ "text:nth_child(7)", {
    font_size = 14
}}

nth_last_child(n)

Filters elements that are the nth last child of their parent and n is an integer.

{ "text:nth_last_child(5)", {
    font_size = 12
}}

nth_last_of_type(type, n)

Filters elements that are the nth last child of their parent that is of the selected type and n is an integer.

{ "inline:nth_last_of_type(text, 3)", {
    font_size = 10
}}

nth_of_type(type, n)

Filters elements that are the nth child of their parent that is of the selected type and n is an integer.

{ "inline:nth_of_type(text, 5)", {
    font_size = 14
}}

only_child

Filters elements that are the only child of their parent.

{ "text:only_child", {
    font_size = 8
}}

only_of_type(type)

Filters elements that are the only child of their parent that is of the selected type.

{ "block:only_of_type(text)", {
    font_size = 14
}}

root

Filters all elements that have no parents.

{ "block:root", {
    visible = false
}}

lclick

Filters elements that are currently being clicked by the left mouse button.

{ "button:lclick", {
    background_color = { 33, 174, 254, 255 }
}}

mclick

Filters elements that are currently being clicked by the middle mouse button.

{ "button:mclick", {
    background_color = { 33, 174, 254, 255 }
}}

rclick

Filters elements that are currently being clicked by the right mouse button.

{ "button:rclick", {
    background_color = { 33, 174, 254, 255 }
}}