MjnMixael: Replaced content with "{{SCPUI moved|https://github.com/MjnMixael/SCPUI/wiki/RCSS-Selectors}}"

2026-10-28T18:33:17Z

Replaced content with "{{SCPUI moved|https://github.com/MjnMixael/SCPUI/wiki/RCSS-Selectors}}"

← Older revision		Revision as of 18:33, 28 October 2026
Line 1:		Line 1:
	{{~~RCSS}}~~		{{SCPUI moved\|https://github.com/MjnMixael/SCPUI/wiki/RCSS-Selectors}}
	~~Selectors are used to select elements to apply specific rules to. The selector syntax supported in RCSS is as follows:~~

	{\| ~~border=1 cellpadding=4 style="border-collapse~~: ~~collapse"~~
	\|-
	~~\| Pattern~~
	~~\| Meaning~~
	\|-
	~~\| E~~
	~~\| Matches any element of type E (ie, an element declared in an RML document as <E>)~~.
	\|-
	~~\| E F~~
	~~\| Matches any element of type F that is a descendant of an E element.~~
	\|-
	~~\| E.foo~~
	~~\| Matches any element of type E that has been declared with class foo.~~
	\|-
	~~\| E#foo~~
	~~\| Matches any element of type E that has been declared with an ID of foo.~~
	\|-
	~~\| E:foo~~
	~~\| Matches any element of type E that has the pseudo-class foo currently active.~~
	\|}
	~~Note that attribute selectors, the + selector, and the > selector are currently not supported.~~

	~~The following pseudo-classes are supported natively (this includes the full range of proposed structural selectors from CSS3):~~

	~~{\| border=1 cellpadding=4 style="border-collapse: collapse"~~
	\|-
	~~Pseudo-class~~
	~~\| Meaning~~
	\|-
	~~\| :hover~~
	~~\| Matches an element that is currently under the mouse cursor.~~
	\|-
	~~\| :active~~
	~~\| Matches an element that has been clicked on, only until the button is released.~~
	\|-
	~~\| :focus~~
	~~\| Matches an element that has input focus.~~
	\|-
	~~\| :nth-child(an + b)~~
	~~\| Matches an element that has an + b - 1 siblings before it.~~
	\|-
	~~\| :nth-last-child(an + b)~~
	~~\| Similar to nth-child, but counts backwards.~~
	\|-
	~~\| :nth-of-type(an + b)~~
	~~\| Similar to nth-child, but only counts sibling elements of the same type.~~
	\|-
	~~\| :nth-last-of-type(an + b)~~
	~~\| Similar to nth-of-type, but counts backwards.~~
	\|-
	~~\| :first-child~~
	~~\| Matches an element that is the first child of its parent.~~
	\|-
	~~\| :last-child~~
	~~\| Matches an element that is the last child of its parent.~~
	\|-
	~~\| :first-of-type~~
	~~\| Matches an element that is the first child of its type.~~
	\|-
	~~\| :last-of-type~~
	~~\| Matches an element that is the last child of its type.~~
	\|-
	~~\| :only-child~~
	~~\| Matches an element that has no sibling elements.~~
	\|-
	~~\| :only-of-type~~
	~~\| Matches an element that has no sibling elements of its type.~~
	\|-
	~~\| :empty~~
	~~\| Matches an element that has no child nodes.~~
	\|}
	~~For a much fuller description of the :nth- style selectors, please refer to the respective page of the CSS3 working draft. even and odd are supported in RCSS.~~

	A simple selector is made up of an optional element type followed by zero or more class selectors, ID selectors and pseudo-class selectors. If an element type is not given, any element type will be matched. So, for example, the selector:
	~~<pre>~~
	~~div#level_list:hover~~
	</~~pre>~~
	~~will match any element of type div with an ID of level_list that is currently being hovered by the cursor.~~

	A selector is made up of potentially multiple simple selectors separated by whitespace. For an element to be matched by a selector with multiple simple selectors, it itself must match the last simple selector, and it must have descendants in the RML hierarchy that match, in order, each of the preceding simple selectors. So, for example, the selector:
	~~<pre>~~
	~~div#level_list input.select option:nth-child(even)~~
	</~~pre>~~
	will only match an element of type option that is an even-numbered child of its parent, that has an ancestor of an input element of class select, that itself has an ancestor that is a div element with the ID level_list.

	~~Multiple selectors can be appended with commas, which is equivalent to an OR statement. For example, the following:~~
	~~<pre>~~
	~~div#level_list,~~
	~~div#weapon_list,~~
	~~.colour_list~~
	</~~pre>~~
	~~will match a div element with ID level_list, or ID weapon_list, or any element that has a class of colour_list.~~

	~~See the CSS specifications for more thorough documentation and examples on the use of selectors. Please note that pseudo~~-~~classes (such as :first-letter, :before, etc) are not yet supported in RCSS.~~

MjnMixael: Created page with "{{RCSS}} Selectors are used to select elements to apply specific rules to. The selector syntax supported in RCSS is as follows: {| border=1 cellpadding=4 style="border-collap..."

2023-04-22T16:28:56Z

Created page with "{{RCSS}} Selectors are used to select elements to apply specific rules to. The selector syntax supported in RCSS is as follows: {| border=1 cellpadding=4 style="border-collap..."

New page

{{RCSS}}
Selectors are used to select elements to apply specific rules to. The selector syntax supported in RCSS is as follows:

{| border=1 cellpadding=4 style="border-collapse: collapse"
|-
| Pattern
| Meaning
|-
| E
| Matches any element of type E (ie, an element declared in an RML document as <E>).
|-
| E F
| Matches any element of type F that is a descendant of an E element.
|-
| E.foo
| Matches any element of type E that has been declared with class foo.
|-
| E#foo
| Matches any element of type E that has been declared with an ID of foo.
|-
| E:foo
| Matches any element of type E that has the pseudo-class foo currently active.
|}
Note that attribute selectors, the + selector, and the > selector are currently not supported.

The following pseudo-classes are supported natively (this includes the full range of proposed structural selectors from CSS3):

{| border=1 cellpadding=4 style="border-collapse: collapse"
|-
Pseudo-class
| Meaning
|-
| :hover
| Matches an element that is currently under the mouse cursor.
|-
| :active
| Matches an element that has been clicked on, only until the button is released.
|-
| :focus
| Matches an element that has input focus.
|-
| :nth-child(an + b)
| Matches an element that has an + b - 1 siblings before it.
|-
| :nth-last-child(an + b)
| Similar to nth-child, but counts backwards.
|-
| :nth-of-type(an + b)
| Similar to nth-child, but only counts sibling elements of the same type.
|-
| :nth-last-of-type(an + b)
| Similar to nth-of-type, but counts backwards.
|-
| :first-child
| Matches an element that is the first child of its parent.
|-
| :last-child
| Matches an element that is the last child of its parent.
|-
| :first-of-type
| Matches an element that is the first child of its type.
|-
| :last-of-type
| Matches an element that is the last child of its type.
|-
| :only-child
| Matches an element that has no sibling elements.
|-
| :only-of-type
| Matches an element that has no sibling elements of its type.
|-
| :empty
| Matches an element that has no child nodes.
|}
For a much fuller description of the :nth- style selectors, please refer to the respective page of the CSS3 working draft. even and odd are supported in RCSS.

A simple selector is made up of an optional element type followed by zero or more class selectors, ID selectors and pseudo-class selectors. If an element type is not given, any element type will be matched. So, for example, the selector:
<pre>
div#level_list:hover
</pre>
will match any element of type div with an ID of level_list that is currently being hovered by the cursor.

A selector is made up of potentially multiple simple selectors separated by whitespace. For an element to be matched by a selector with multiple simple selectors, it itself must match the last simple selector, and it must have descendants in the RML hierarchy that match, in order, each of the preceding simple selectors. So, for example, the selector:
<pre>
div#level_list input.select option:nth-child(even)
</pre>
will only match an element of type option that is an even-numbered child of its parent, that has an ancestor of an input element of class select, that itself has an ancestor that is a div element with the ID level_list.

Multiple selectors can be appended with commas, which is equivalent to an OR statement. For example, the following:
<pre>
div#level_list,
div#weapon_list,
.colour_list
</pre>
will match a div element with ID level_list, or ID weapon_list, or any element that has a class of colour_list.

See the CSS specifications for more thorough documentation and examples on the use of selectors. Please note that pseudo-classes (such as :first-letter, :before, etc) are not yet supported in RCSS.

RCSS Selectors - Revision history

MjnMixael: Replaced content with "{{SCPUI moved|https://github.com/MjnMixael/SCPUI/wiki/RCSS-Selectors}}"

MjnMixael: Created page with "{{RCSS}} Selectors are used to select elements to apply specific rules to. The selector syntax supported in RCSS is as follows: {| border=1 cellpadding=4 style="border-collap..."