diff --git a/apps/tests/ui/style/style-tests.ts b/apps/tests/ui/style/style-tests.ts index 1a0d7b585..c3027bf23 100644 --- a/apps/tests/ui/style/style-tests.ts +++ b/apps/tests/ui/style/style-tests.ts @@ -1400,6 +1400,32 @@ export function test_alone_attr_selector() { } helper.buildUIAndRunTest(testButton, testFunc, testCss); } + +export function test_UsingSameSelectors_ShouldApplyLatest() { + let testButton = new buttonModule.Button(); + testButton.className = 'green'; + + let testCss = ".green { background-color: #FF0000; } .green { background-color: #00FF00; }"; + + let testFunc = function (views: Array) { + // style from correct type css should be applied + helper.assertViewBackgroundColor(testButton, "#00FF00"); + } + helper.buildUIAndRunTest(testButton, testFunc, testCss); +} + +export function test_UsingSameSelectorsWithSpecific_ShouldApplyLatest() { + let testButton = new buttonModule.Button(); + testButton.className = 'red green'; + + let testCss = ".red { background-color: #FF0000; } Button.green { background-color: #00FF00; }"; + + let testFunc = function (views: Array) { + // style from correct type css should be applied + helper.assertViewBackgroundColor(testButton, "#00FF00"); + } + helper.buildUIAndRunTest(testButton, testFunc, testCss); +} // // For information and example how to use style properties please refer to special [**Styling**](../../../styling.md) topic. // diff --git a/ui/styling/css-selector.ts b/ui/styling/css-selector.ts index 026d52a5f..15f6b2121 100644 --- a/ui/styling/css-selector.ts +++ b/ui/styling/css-selector.ts @@ -143,7 +143,12 @@ export class CssSelector { class CssTypeSelector extends CssSelector { get specificity(): number { - return TYPE_SPECIFICITY; + let result = TYPE_SPECIFICITY; + let dotIndex = this.expression.indexOf(DOT); + if (dotIndex > -1) { + result += CLASS_SPECIFICITY; + } + return result; } public matches(view: view.View): boolean { let result = matchesType(this.expression, view);