How do I install the Ns CSS Selectors skill?

Run npx skillmds@latest add nativescript/ns-css-selectors in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Ns CSS Selectors safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Ns CSS Selectors?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Ns CSS Selectors free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under Apache-2.

Who published Ns CSS Selectors?

nativescript (@nativescript) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Ns CSS Selectors by nativescript — Agent Skill

Name: Ns CSS Selectors
Author: nativescript

Ns CSS Selectors

Use when a NativeScript CSS rule silently doesn't apply and you're asking "does NativeScript support this selector?" — the supported selector set (:not/:is/:where/:pressed/:hovered/@media/attribute operators), :where()'s zero specificity, bare [attr] selectors matching nothing, per-declaration (not per-block) error recovery, and the className-swap stale-background workaround.

nativescript c8bc6b5 3.6 KB Updated Sep 17, 2026

File contents

CSS selector support and silent failures

Supported

Type (Button, dashed forms like stack-layout), .class, #id, child >, descendant, :not(), :is(), :where(), :pressed, :hovered, @media (nestable), and attribute selectors with every operator: [a], [a=v], [a~=v], [a|=v], [a^=v], [a$=v], [a*=v]. Attribute selectors match arbitrary properties — including plain expando props you set from code (btn['testAttr'] = 'x').

Not in the framework's own test surface (treat as unverified): !important, z-index interplay, transforms via type selectors, sibling combinators (+, ~).

Specificity notes

:where() has zero specificity — #myButton { color: green } beats Button:where(#myButton) { color: red }. Use :where() to write overridable defaults.
Property names are case-insensitive (cOlOr: blue applies); keyword values generally are not — keep values lowercase.

Silent failure modes (the debugging checklist)

A bare [attr] selector with no type/class prefix matches nothing. [testAttr*='flower'] { } is dead; button[testAttr*='flower'] works.
~= is whitespace-token match, not substring: testAttr="my-flower" does NOT match [testAttr~='flower'] (use *=).
A typo'd id anywhere in a > chain kills the whole rule silently — no warning exists for unmatched selectors.
Invalid declarations fail per-declaration, not per-block: a block with eleven bogus values and one valid font-size: 30 still applies the font-size. Don't assume a rule "didn't parse" because one line is broken — and don't assume the rest is fine because one line applied.
Only real component types register as CSS types — a type selector for a non-registered name matches nothing (e.g. inside ActionBar, NavigationButton { } and ActionItem { } silently match nothing — style bar items via classes, see ns-top-nav).

Applying CSS dynamically

css is settable on any View, not just Page: someLayout.css = '.hot { color: red; }'.
Application.addTaggedAdditionalCSS(css, tag) / removeTaggedAdditionalCSS(tag) update the global sheet but need a state refresh on live pages (page._onCssStateChange()) to repaint already-rendered views.
Scope platform/theme/orientation styling with the root classes (.ns-android, .ns-dark, .ns-landscape, …) — see ns-root-css-classes.

Known workaround: className swap leaves stale background

Switching view.className directly from one class to another can leave the previous class's native background color behind (a long-standing framework TODO). Clear between values:

view.className = '';
view.className = 'card-highlighted';

New in 9.1: corner-shape: squircle (continuous corner curve) — iOS-only; Android ignores it silently.

Verified 2026-08 against @nativescript/core 9.1.0-rc.3: selector support, :where() specificity, attribute-operator semantics, per-declaration recovery and the className workaround are asserted in apps/automated/src/ui/styling/style-tests.ts and ui/button/button-tests.ts; corner-shape read from packages/core/ui/styling (background.ios.ts). Not re-run standalone.

---name: ns-css-selectorsdescription: Use when a NativeScript CSS rule silently doesn't apply and you're asking "does NativeScript support this selector?" — the supported selector set (:not/:is/:where/:pressed/:hovered/@media/attribute operators), :where()'s zero specificity, bare [attr] selectors matching nothing, per-declaration (not per-block) error recovery, and the className-swap stale-background workaround.license: Apache-2.0---# CSS selector support and silent failures## SupportedType (`Button`, dashed forms like `stack-layout`), `.class`, `#id`, child `>`, descendant, `:not()`, `:is()`, `:where()`, `:pressed`, `:hovered`, `@media` (nestable), and attribute selectors with every operator: `[a]`, `[a=v]`, `[a~=v]`, `[a|=v]`, `[a^=v]`, `[a$=v]`, `[a*=v]`. Attribute selectors match arbitrary properties — including plain expando props you set from code (`btn['testAttr'] = 'x'`).Not in the framework's own test surface (treat as unverified): `!important`, `z-index` interplay, transforms via type selectors, sibling combinators (`+`, `~`).## Specificity notes* `:where()` has **zero specificity** — `#myButton { color: green }` beats `Button:where(#myButton) { color: red }`. Use `:where()` to write overridable defaults.* Property **names** are case-insensitive (`cOlOr: blue` applies); keyword *values* generally are not — keep values lowercase.## Silent failure modes (the debugging checklist)* **A bare `[attr]` selector with no type/class prefix matches nothing.** `[testAttr*='flower'] { }` is dead; `button[testAttr*='flower']` works.* **`~=` is whitespace-token match, not substring**: `testAttr="my-flower"` does NOT match `[testAttr~='flower']` (use `*=`).* **A typo'd id anywhere in a `>` chain kills the whole rule silently** — no warning exists for unmatched selectors.* **Invalid declarations fail per-declaration, not per-block**: a block with eleven bogus values and one valid `font-size: 30` still applies the font-size. Don't assume a rule "didn't parse" because one line is broken — and don't assume the rest is fine because one line applied.* Only real component types register as CSS types — a type selector for a non-registered name matches nothing (e.g. inside `ActionBar`, `NavigationButton { }` and `ActionItem { }` silently match nothing — style bar items via classes, see `ns-top-nav`).## Applying CSS dynamically* `css` is settable on **any View**, not just Page: `someLayout.css = '.hot { color: red; }'`.* `Application.addTaggedAdditionalCSS(css, tag)` / `removeTaggedAdditionalCSS(tag)` update the global sheet but need a state refresh on live pages (`page._onCssStateChange()`) to repaint already-rendered views.* Scope platform/theme/orientation styling with the root classes (`.ns-android`, `.ns-dark`, `.ns-landscape`, …) — see `ns-root-css-classes`.## Known workaround: className swap leaves stale backgroundSwitching `view.className` directly from one class to another can leave the previous class's native background color behind (a long-standing framework TODO). Clear between values:```tsview.className = '';view.className = 'card-highlighted';```New in 9.1: `corner-shape: squircle` (continuous corner curve) — **iOS-only**; Android ignores it silently.Verified 2026-08 against @nativescript/core 9.1.0-rc.3: selector support, :where() specificity, attribute-operator semantics, per-declaration recovery and the className workaround are asserted in apps/automated/src/ui/styling/style-tests.ts and ui/button/button-tests.ts; corner-shape read from packages/core/ui/styling (background.ios.ts). Not re-run standalone.

Frequently asked questions