Custom Theme - CSS Selector Does Not Work For a Class

Issue Description

Customer modified a JSP file to add a custom DIV element and then specified the element color, size in overrides_custom.css file.

But then the custom theme was set as Active theme, the custom CSS was not applied to the element.

Resolution

Review of the modified JSP showed that the customer used incorrect value for the element class:

<div class="711">
<h2>Custom Company Header</h2>
<ul>
<li>Testing</li>
</ul>
</div>

and corresponding CSS was

#loginPage #rotating > .711 {
    color: #6699ff;
    font-size: 25px;
    font-weight: normal;
}

According to CSS rules, a valid name should start with an underscore (_), a hyphen (-) or a letter (a-z) which is followed by any numbers, hyphens, underscores, letters:

CSS Quick Tip: The Valid Characters in a Custom CSS Selector

Once the class name was changed to a correct value, like myCorpClass in jsp file

<div class="myCorpClass">
    <h2>Custom Company Header</h2>
    <ul>
        <li>Testing</li>
       </ul>
</div>

and in CSS

#loginPage #rotating > .myCorpClass {
    color: #6699ff;
    font-size: 25px;
    font-weight: normal;
}

cusrtomer got expected output.

Solution tested with TIBCO JasperReports^® Server v.7.2.0, v.7.5.0

AS-20200324, case 01853598