StyleRule
Defines style properties which override properties on the instances affected by the Selector property.
Summary
Properties
A number that determines how properties of the StyleRule apply relative to the same properties in other StyleRules. Higher priority values take precedence over lower.
A string specifying which instances the StyleRule should affect.
A read-only string that displays errors from the Selector property.
Methods
Returns a dictionary of key-value pairs describing the properties of the StyleRule.
Returns the value of a specific property in the StyleRule.
Lets you declare and set multiple properties of the StyleRule at once.
Returns an array of associated StyleRules.
Inserts a new StyleRule into the array of rules.
Similar to InsertStyleRule() but lets you declare and set multiple StyleRules at once.
Events
Events inherited from StyleBaseFires when one or more StyleRules is explicitly changed on the connected StyleSheet or StyleRule.
Properties
Priority
A number that determines how properties of the StyleRule apply relative
to the same properties in other StyleRules. Higher
priority values take precedence over lower. For example, if a StyleRule
with a priority of 10 has an AnchorPoint property of
Selector
A string specifying which instances the StyleRule should affect. This can be a mix of selectors and combinators to match characteristics such as the class name, instance name, and hierarchy relationships.
For example, ".Container > ImageLabel.BlueOnHover:Hover" effectively means the style rule overrides every ImageLabel that's a child of an instance tagged with Container (.Container > ImageLabel) and is tagged with BlueOnHover (.BlueOnHover) and is in the Enum.GuiState.Hover state (:Hover).
Selectors
| Selector | Description | Examples |
|---|---|---|
| [class] | Matches instances of a GuiObject or UIComponent class. | "Frame" "ImageButton" "UICorner" |
| .[tag] | Matches instances tagged with a CollectionService tag. | ".Container" ".BlueOnHover" |
| #[name] | Matches instances of a specific Instance.Name. | "#ModalFrame" "#CloseButton" |
| :[state] | Matches instances currently in a Enum.GuiState. | ":Hover" |
Combinators
| Combinator | Description | Examples |
|---|---|---|
| > | Matches instances that are direct children of the previous filter matches. | "Frame > .Inventory" |
| >> | Matches instances that are descendants of the previous filter matches. | "ImageButton >> .BlueOnHover" |
| , | Specifies a list of multiple independent selectors for the style rule. | "Frame.TagA, TextLabel.TagA" |
| :: | Creates a phantom UIComponent instance under the previous filter matches and applies the style rule's properties to it. | "Frame::UICorner" |
Code Samples
The following example shows how to define a class selector which targets all TextButton instances and styles them with blue background and light grey text. To test, paste the code into a LocalScript which is a child of a ScreenGui located inside the StarterGui container.
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local screenGui = script.Parent
local coreSheet = Instance.new("StyleSheet")
coreSheet.Parent = ReplicatedStorage
local styleLink = Instance.new("StyleLink")
styleLink.StyleSheet = coreSheet
styleLink.Parent = screenGui
local rule = Instance.new("StyleRule")
rule.Parent = coreSheet
-- Class selector
rule.Selector = "TextButton"
-- Set rule properties
rule:SetProperties({
["BackgroundColor3"] = Color3.fromHex("335FFF"),
["TextColor3"] = Color3.fromHex("E1E1E1"),
["Size"] = UDim2.new(0.15, 0, 0, 40),
["BorderSizePixel"] = 0
})
local button = Instance.new("TextButton")
button.Text = "Main Menu"
button.Parent = screenGuiThe following example shows how to define a tag selector which utilizes tags applied through CollectionService to target a TextButton tagged with ButtonPrimary. To test, paste the code into a LocalScript which is a child of a ScreenGui located inside the StarterGui container.
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local screenGui = script.Parent
local coreSheet = Instance.new("StyleSheet")
coreSheet.Parent = ReplicatedStorage
local styleLink = Instance.new("StyleLink")
styleLink.StyleSheet = coreSheet
styleLink.Parent = screenGui
local rule = Instance.new("StyleRule")
rule.Parent = coreSheet
-- Tag selector
rule.Selector = ".ButtonPrimary"
-- Set rule properties
rule:SetProperties({
["BackgroundColor3"] = Color3.fromHex("FF0099"),
["TextColor3"] = Color3.fromHex("E1E1E1"),
["Size"] = UDim2.new(0.15, 0, 0, 40),
["BorderSizePixel"] = 0
})
local button = Instance.new("TextButton")
button.Text = "Main Menu"
button.Parent = screenGui
-- Apply tag to button
CollectionService:AddTag(button, "ButtonPrimary")The following example shows how to define a UI modifier selector which applies a phantom UICorner instance to a Frame tagged with RoundedCorner20. To test, paste the code into a LocalScript which is a child of a ScreenGui located inside the StarterGui container.
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local screenGui = script.Parent
local coreSheet = Instance.new("StyleSheet")
coreSheet.Parent = ReplicatedStorage
local styleLink = Instance.new("StyleLink")
styleLink.StyleSheet = coreSheet
styleLink.Parent = screenGui
local rule = Instance.new("StyleRule")
rule.Parent = coreSheet
-- UI component selector
rule.Selector = "Frame.RoundedCorner20::UICorner"
-- Set rule property
rule:SetProperty("CornerRadius", UDim.new(0, 20))
-- Create frame
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0.4, 0, 0.2, 0)
frame.Parent = screenGui
-- Apply tag to frame
CollectionService:AddTag(frame, "RoundedCorner20")Methods
GetProperties
Returns a dictionary of key-value pairs describing the properties of the StyleRule, for example:
Returns
Dictionary of key-value pairs describing the properties of the StyleRule.
GetProperty
Returns the value of a specific property in the StyleRule.
Parameters
String name of the property, for example "AnchorPoint" or "BackgroundColor3".
Returns
Value of the property.
SetProperties
Similar to SetProperty() but lets you declare and set multiple properties of the StyleRule at once. Each assignment should be a valid property of the affected GuiObject or UIComponent (UICorner, UIGradient, etc.), and each assigned value should match its property's value type, for example Vector2 for AnchorPoint or Color3 for BackgroundColor3.
Attempts to assign invalid property names such as "AnchorPt" or "BkColor" will silently fail. Type mismatches such as CFrame for AnchorPoint or UDim2 for BackgroundColor3 will also fail and an error will appear in the Output window.
To set/update just one property of a StyleRule, see SetProperty().
Note that you can assign tokens as property values through the $ prefix:
Parameters
Dictionary of key-value pairs defining the properties to set.
Returns
SetProperty
Sets a new property (or modifies an existing property) for the StyleRule. The name parameter should be a valid property of the affected GuiObject or UIComponent (UICorner, UIGradient, etc.), and the assigned value should match the property's value type, for example Vector2 for AnchorPoint or Color3 for BackgroundColor3.
Attempts to assign invalid property names such as "AnchorPt" or "BkColor" will silently fail. Type mismatches such as CFrame for AnchorPoint or UDim2 for BackgroundColor3 will also fail and an error will appear in the Output window.
To set multiple properties for a StyleRule at once, see SetProperties().
Note that you can assign tokens as property values through the $ prefix:
Parameters
Property name to set, for example "BackgroundColor3".
Property value to set, for example Color3.new(1, 0, 0.25).