Order of precedence

Style definitions are applied according to the order of precedence.

If different styles can be applied to an element, the following priority is used to determine the style definition to be applied:

element-type.style-name:pseudo-selector
.style-name:pseudo-selector
element-type.style-name
element-type:pseudo-selector
:pseudo-selector
.style-name
element-type
*

Note: The precedence rules to apply styles may vary according to the front-end type. As a general rule, Genero presentation styles precedence rules are similar HTML/CSS precedence rules.

For example, consider an Edit element with the style attribute set to 'mandatory':

EDIT f1 = FORMONLY.cust_name, STYLE="mandatory"

With the following style definitions (mystyles.4st):

<?xml version="1.0" encoding="ANSI_X3.4-1968"?>
<StyleList>
  <Style name="Edit.mandatory:focus">
     <StyleAttribute name="backgroundColor" value="yellow" />
  </Style>
  <Style name=".mandatory:focus">
     <StyleAttribute name="backgroundColor" value="blue" />
  </Style>
  <Style name="Edit.mandatory">
     <StyleAttribute name="backgroundColor" value="green" />
  </Style>
  <Style name="Edit:focus">
     <StyleAttribute name="backgroundColor" value="red" />
  </Style>
  <Style name=":focus">
     <StyleAttribute name="backgroundColor" value="cyan" />
  </Style>
  <Style name=".mandatory">
     <StyleAttribute name="backgroundColor" value="magenta" />
  </Style>
  <Style name="*">
     <StyleAttribute name="backgroundColor" value="orange" />
  </Style>
</StyleList>

The style definitions are scanned in the following order:

Edit.mandatory:focus
.mandatory:focus
Edit.mandatory
Edit:focus
:focus
.mandatory
Edit
*

If the Edit field f1 has the focus, with the mystyles.4st definition file, the field background color will be yellow. If the Edit field f1 does not have the focus, the field background color will be green.