Document data-current-path HTML attribute

customize/custom-scripts.mdx

@@ -64,7 +64,7 @@
   - `#content-area` — Primary content area, excluding the sidebar and table of contents.
   - `#content` — Inner content element within the content area.
   - `#header` — Page-level header element.
   - `#banner` — Announcement banner displayed above the navbar.
   - `#footer` — Page footer. Also targetable as an element selector: `footer`.
   - `#page-title` — The `<h1>` heading at the top of each page.
   - `#pagination` — Bottom pagination bar with previous and next page links.
@@ -79,12 +79,12 @@
 </Accordion>
 <Accordion title="Sidebar">
   - `#sidebar` — The sidebar navigation panel.
   - `#sidebar-content` — Scrollable content area within the sidebar.
 </Accordion>
 <Accordion title="Table of contents">
   - `#table-of-contents` — Table of contents panel on the right side of the page.
   - `#table-of-contents-layout` — Layout wrapper for the table of contents.
   - `#table-of-contents-content` — Scrollable content within the table of contents.
 </Accordion>
 <Accordion title="Search">
   - `#search-bar-entry` — Search bar trigger in the topbar.
@@ -122,7 +122,7 @@
 </Accordion>
 <Accordion title="Localization">
   - `#localization-select-trigger` — Button that opens the language selector.
   - `#localization-select-content` — Dropdown content of the language selector.
   - `#localization-select-item` — Individual language option within the selector.
 </Accordion>
 <Accordion title="Changelog">
@@ -130,10 +130,10 @@
   - `#changelog-filters-content` — Content area within the changelog filter panel.
 </Accordion>
 <Accordion title="Multi-view">
   - `#multi-view-dropdown` — Dropdown for switching between documentation views.
 </Accordion>
 <Accordion title="Text selection">
   - `#text-selection-tooltip` — Tooltip that appears when text is selected on a page.
   - `#text-selection-tooltip-button` — Action button within the text selection tooltip.
 </Accordion>
 </AccordionGroup>
@@ -146,7 +146,7 @@
   <Accordion title="Content components">
     - `accordion` — Collapsible accordion item.
     - `accordion-group` — Wrapper grouping multiple accordions.
     - `callout` — Callout block (Note, Warning, Tip, etc.).
     - `card` — Individual card element.
     - `card-group` — Wrapper grouping multiple cards. Deprecated in favor of `columns`, but preserved for backward compatibility.
     - `columns` — Multi-column layout wrapper.
@@ -168,9 +168,9 @@
   <Accordion title="Page layout">
     - `mdx-content` — Rendered MDX content area.
     - `panel` — Floating panel component. Also targetable as an ID selector: `#panel`.
     - `eyebrow` — Small label displayed above a page title.
     - `link` — Anchor link element.
     - `breadcrumb-list` — Breadcrumb navigation list.
     - `breadcrumb-item` — Individual breadcrumb item.
   </Accordion>
   <Accordion title="Topbar navigation">
@@ -228,7 +228,7 @@
     - `api-section-heading-title` — Title within an API endpoint section heading.
     - `api-section-heading-subtitle` — Subtitle within an API endpoint section heading.
     - `field` — Parameter or property field in the API reference.
     - `option-dropdown` — Dropdown for selecting between API options.
     - `tryit-button` — "Try it" button that opens the API playground.
     - `method-pill` — HTTP method badge (GET, POST, etc.) on an endpoint.
     - `method-nav-pill` — HTTP method badge shown in the sidebar navigation.
@@ -255,7 +255,7 @@
     - `contextual-feedback-form-submit-button` — Submit button for the contextual feedback form.
   </Accordion>
   <Accordion title="Code snippet feedback">
     - `code-snippet-feedback-popover-content` — Popover content for code snippet feedback.
     - `code-snippet-feedback-form` — Feedback form for a code snippet.
     - `code-snippet-feedback-textarea` — Text area within the code snippet feedback form.
     - `code-snippet-feedback-form-title` — Title of the code snippet feedback form.
@@ -268,7 +268,7 @@
   </Accordion>
   <Accordion title="Multi-view">
     - `multi-view-item` — Individual view option in a multi-view switcher.
     - `multi-view-dropdown` — Dropdown for selecting between multiple views.
     - `multi-view-dropdown-trigger` — Button that opens the multi-view dropdown.
     - `multi-view-dropdown-content` — Content area of the multi-view dropdown.
     - `multi-view-dropdown-item` — Individual item within the multi-view dropdown.
@@ -332,6 +332,14 @@
     - `[data-badge]` — Any badge element.
     - `[data-badge][data-color="blue"]` — Badge filtered by color.
     - `[data-badge][data-size="sm"]` — Badge filtered by size.
+
+    Current path (`data-current-path`):
+
+    Use `data-current-path` to style custom CSS on specific pages or subpaths.
+
+    - `html[data-current-path="/"]` — Matches the root page.
+    - `html[data-current-path="/quickstart"]` — Matches a specific page.
+    - `html[data-current-path^="/api-reference/"]` — Matches any page under a section.
   </Accordion>
 </AccordionGroup>