.TH css support 2025-10-18 "grim"
.Nm Grim
.SH DESCRIPTION
The purpose of this document is to outline the current support of the Cascade Style Sheets within the compiler.

.SH Support for Selectors 
.BI Testfile: tests/css_parser.cc
.P
Selector's are used for determining if a selector applies to a element. In grim you can use the following selectors:
.RS
1) A elements tag name: "h1", "body"
.br
2) Any attribute of an element: "[type='password']", "[custom_name='example']"
.br
3) The id attribute can be selected with: "#button", "#main"
.br
4) Classes: ".className", ".heading"
.br
5) Universal selector will match on everything, called with: "*"
.RE

.SS Nesting
Multiple complex selector's can be made by nesting CSS selectors, below is a very simple version of nesting:
.br
.RS
h1 {
.RS
color: red;
.br
b {
.RS
color: black;
.RE
}
.RE
}
.RE
.P
This will compile into two CSS styles:
.RS
h1 {
.br
.RS 
color: red;
.RE
}
.br
h1 b {
.RS
color: black;
.RE
}
.RE
.P
.SS & Nesting
If you would like more control of the selector building you can use the "&" value
.br
.RS
h1 {
.RS
color: red;
.br
& b {
.RS
color: black;
.RE
}
.RE
}
.RE
.br
The "&" value with be replaced with the parent's select. (It is not limited to just one "&") Here is what that compiles to:
.RS
h1 {
.br
.RS 
color: red;
.RE
}
.br
b h1 {
.RS
color: black;
.RE
}
.RE
.P

.SH Support for Combinators
.BI Testfile: tests/css_selector.cc
.P
Selector's are used for determining if a selector applies to a element. In grim you can use the following selectors: