KNOWLEDGE BASE
Log In    |    Knowledge Base    |    4D Home
Tech Tip: CSS Specified Attribute Selector Behaviors
PRODUCT: 4D | VERSION: 20 | PLATFORM: Mac & Win
Published On: August 15, 2023

In project mode, the style sheet feature allows you to implement CSS code to your forms using external style sheets. The specified attribute selector selects form elements based on their properties shown in the Property List window. 4D takes influence from the CSS language and has integrated four syntaxes of the specified attribute selector. The following list explains each of their behaviors:


  1. [attribute] selector
  2. This [attribute] selector selects all form elements with a specific attribute/property.

  3. [attribute=value] selector
  4. The [attribute=value] selector refers to any form elements whose attribute value is strictly equal to a certain value.

  5. [attribute~=value] selector
  6. The [attribute~=value] selector gathers the form elements whose attribute value contains a certain value. This one is unique in that when the specified value is found, it must be delimited by a space. For example, "cat" in "cat name" is considered found, but "cat" in "catastrophe" would not be valid.

  7. [attribute|=value] selector
  8. The [attribute|=value] selector selects all form elements whose attribute value either starts with a certain value or is strictly equal to a certain value. Unlike the previous syntax, the specified attribute does not need to be surrounded by spaces when found; so, both "cat" in "cat name" and "cat" in "catastrophe" would be considered valid.