KNOWLEDGE BASE
Log In    |    Knowledge Base    |    4D Home
Tech Tip: CSS Order of precedence at selector level
PRODUCT: 4D | VERSION: 18 | PLATFORM: Mac & Win
Published On: October 12, 2020

The use of Cascading Style Sheets (CSS) is supported in project databases. When defining syles in a .css file using selectors, it is important to keep in mind the order of precedence at the selector level. This can help avoid much confusion about which styles are actually taking effect when you have a lot of overlapping rule-sets, because 4D will always choose the CSS rule-set with the top priority for a particular object. Below is the order of precedence at the selector level, in descending priority, with an example below each one.

1. Object Name
#myText { font-size: 12px; }

2. Specific Attribute
text[text|=Hello] { font-size: 14px; }

3. Class
.headerStyle { font-size: 18px; }

4. Object Type
text { font-size: 24px; }

5. All Objects
* { font-size: 36px;}

For instance, imagine that you have a text object named "myText", and examples #1, #4, and #5 currently exist in your .css file. 4D will recognize your object's font-size to be 12px, since Object Name takes precedence over Object Type and All Objects. If you remove the Object Name rule-set, then 4D will recognize your object's font-size to be 24px.