Overview of CSS Selectors for Content Designer and New UX

Explore the CSS selectors available for creating custom CSS styles for pages built with the Content Designer and New UX.

Employee App
Staffbase Intranet

Custom CSS allows you to customize the appearance and layout of pages created with the Content Designer and the user interface using the New UX.

You can use custom CSS in the following scenarios:

  • Creating custom blocks with the Content Designer.
  • User interface using the New UX.

When migrating a Classic Editor page with custom CSS to the Content Designer, the existing Classic Editor CSS no longer applies after migration. Content Designer pages use a different rendering structure, so any required custom styles must be recreated using the selectors described below.

When switching from the Classic UX with custom CSS to the New UX, the existing Classic UX Editor CSS does not apply to the new user interface. The New UX uses a different rendering structure, so any required custom styles must be recreated using the selectors described below. Staffbase offers an activation tool for the New UX, which converts Classic UX Custom CSS into Custom CSS for the New UX.

Custom CSS for the Content Designer and New UX must target data-c13y-* attributes only. The name c13y is short for customizability.

Staffbase does not document or guarantee class names, HTML tag structures, or other internal markup. Selectors that rely on these implementation details are unsupported and may break when the underlying markup changes.

Combine selectors for regions, components, purposes, and individual element IDs as needed to target specific elements for styling.

Selector Placed on Description
data-c13y-region Root element of a feature area Targets a structural area, such as the header, Launchpad, page, Employee Directory, footer, or My Groups.
data-c13y-component Element Targets an element’s structural type, such as a button, popover, card, container, or collection. It describes what the element is, not its user-facing purpose.
data-c13y-purpose Element Targets an element by its user-facing purpose, such as joining, leaving, saving, searching, or sorting. These values are independent of the interface language, unlike selectors based on translated text or aria-label values.
data-c13y-id Element instance Targets a specific element instance, such as an item in a list. The value is unique within the rendered page.
data-c13y-direction <html> and blocks Targets text direction. It is set on the <html> element for the page’s default direction and on individual blocks when their direction differs.
data-c13y-context-* <html> Provides context for scoping CSS rules by page type, space, user role, user group, device, or interaction type.

Combine data-c13y-purpose with data-c13y-component when you need to target an element by both its purpose and its structural type. A purpose value alone does not determine which CSS properties are appropriate for the element.

Context attributes are set on the <html> element. Combine them with other selectors to apply styles only in a specific page, space, user, or device context.

Attribute Values Description
data-c13y-context-page-type Depends on the page type. Identifies the type of page being rendered.
data-c13y-context-space Space ID Identifies the space containing the page.
data-c13y-context-user-role Depends on the user’s role. For example, administrator Identifies the role of the current user.
data-c13y-context-user-groups Space-separated list of user group IDs Identifies the user groups to which the current user belongs. Use the ~= attribute selector to match an individual group ID.
data-c13y-context-device desktop, mobile, tablet, native, ios, android Identifies the device context of the current session.
data-c13y-context-interaction touch, mouse Identifies the primary input method of the current session.

Matches every join button inside the My Groups region:

[data-c13y-region="mygroups"] [data-c13y-component="button"][data-c13y-purpose="join"] {
  background-color: #0a5c36;
}

Matches the join button of one specific group in a list:

[data-c13y-region="mygroups"] [data-c13y-id="group-42"] [data-c13y-purpose="join"] {
  background-color: #0a5c36;
}

Matches the header for users who belong to the hr user group:

[data-c13y-context-user-groups~="hr"] [data-c13y-region="header"] {
  background-color: #0a5c36;
}

Matches buttons on touch devices:

[data-c13y-context-interaction="touch"] [data-c13y-component="button"] {
  min-height: 44px;
}

Matches containers with right-to-left text direction:

[data-c13y-component="container"][data-c13y-direction="rtl"] {
  padding-inline-start: 16px;
}