Using CSS classes

The CSS class selectors are used within the cascading style sheet files of a framework control.

Permitted selectors

The following CSS selectors can be used conditionally within a CSS file of a framework control:

• Type selectors
• Attribute selectors
• Class selectors

With class selectors, new CSS classes are defined for a framework control, which means that CSS styles are not overwritten outside the framework control. If type or attribute selectors are to be used, you must ensure that they are only used for the class of the framework control and do not overwrite any styles outside the framework control (descendant selector):

.TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1 a {
   color: red;
}

The following CSS selectors should not be used within a CSS file of a framework control:

• ID selectors: Due to multiple instantiation, you cannot assign fixed IDs within a framework control.
• Universal selector: A framework control should not overwrite any styles outside the control during instantiation.

Using the class selectors

CSS classes can be used in the Template.html file, or they can be added dynamically at runtime within the Source.js/ts file.

.TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-template
{
   width: 100%;
   height: 100%;
}

Within the Template.html file, a CSS class is assigned via the HTML attribute "class":

<div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-template tchmi-box">
   
</div>

The class "tchmi-box" sets CSS properties to facilitate element positioning and can be used with all positioned HTML elements.

The dynamic use of a CSS class within Source.js can be realized via the jQuery function ".addClass()", for example:

this.__elementTemplateRoot.addClass('TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-my-custom-class');