From 11a90244646e8b03de971776fa3061c18b4a8039 Mon Sep 17 00:00:00 2001
From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
Date: Mon, 20 Apr 2026 10:55:15 -0700
Subject: [PATCH 1/6] reformat selectors and identifiers

---
 customize/custom-scripts.mdx | 418 +++++++++++++++++++++++++----------
 1 file changed, 299 insertions(+), 119 deletions(-)

diff --git a/customize/custom-scripts.mdx b/customize/custom-scripts.mdx
index e91436b8d..4edce752d 100644
--- a/customize/custom-scripts.mdx
+++ b/customize/custom-scripts.mdx
@@ -30,8 +30,6 @@ Tailwind CSS arbitrary values are not supported. For custom values, use the `sty
 
 Add CSS files to your repository to apply their defined class names and make them available in all of your MDX files.
 
-### Adding `style.css`
-
 For example, you can add the following `style.css` file to customize the styling of the navbar and footer.
 
 ```css
@@ -45,123 +43,307 @@ footer {
 }
 ```
 
-### Using identifiers and selectors
+### Identifiers and selectors
 
-Mintlify has a set of common identifiers and selectors to help you tag important elements of the UI.
+<Warning>
+  References and the styling of common elements are subject to change. Use custom styling with caution. Breaking changes may occur in future updates.
+</Warning>
 
-<Tip>
-  Use inspect element to find references to elements you're looking to customize.
-</Tip>
+Mintlify exposes two types of CSS targeting hooks:
+
+- **ID selectors**: unique page-level elements targeted with `#value { }` in CSS
+- **Element selectors**: component and layout elements targeted with `value { }` in CSS (no `#` or `.` prefix)
 
 <AccordionGroup>
-  <Accordion title="Identifiers">
-    - APIPlaygroundInput: `api-playground-input`
-    - AssistantEntry: `assistant-entry`
-    - AssistantEntryMobile: `assistant-entry-mobile`
-    - Banner: `banner`
-    - BodyContent: `body-content`
-    - ChangelogFilters: `changelog-filters`
-    - ChangelogFiltersContent: `changelog-filters-content`
-    - ChatAssistantSheet: `chat-assistant-sheet`
-    - ChatAssistantTextArea: `chat-assistant-textarea`
-    - ContentArea: `content-area`
-    - ContentContainer: `content-container`
-    - ContentSideLayout: `content-side-layout`
-    - FeedbackForm: `feedback-form`
-    - FeedbackFormCancel: `feedback-form-cancel`
-    - FeedbackFormInput: `feedback-form-input`
-    - FeedbackFormSubmit: `feedback-form-submit`
-    - FeedbackThumbsDown: `feedback-thumbs-down`
-    - FeedbackThumbsUp: `feedback-thumbs-up`
-    - Footer: `footer`
-    - Header: `header`
-    - NavBarTransition: `navbar-transition`
-    - NavigationItems: `navigation-items`
-    - Navbar: `navbar`
-    - PageContextMenu: `page-context-menu`
-    - PageContextMenuButton: `page-context-menu-button`
-    - PageTitle: `page-title`
-    - Pagination: `pagination`
-    - Panel: `panel`
-    - RequestExample: `request-example`
-    - ResponseExample: `response-example`
-    - SearchBarEntry: `search-bar-entry`
-    - SearchBarEntryMobile: `search-bar-entry-mobile`
-    - SearchInput: `search-input`
-    - Sidebar: `sidebar`
-    - SidebarContent: `sidebar-content`
-    - TableOfContents: `table-of-contents`
-    - TableOfContentsContent: `table-of-contents-content`
-    - TableOfContentsLayout: `table-of-contents-layout`
-    - TopbarCtaButton: `topbar-cta-button`
+  <Accordion title="ID selectors">
+    Each ID appears once per page. Use these as `#value` in CSS. For example, `#navbar { background: red; }`.
+
+    **Page layout**
+
+    - `#body-content` — Outermost wrapper for the page body.
+    - `#content-area` — Primary content area, excluding the sidebar and table of contents.
+    - `#content` — Inner content element within the content area.
+    - `#content-container` — Container wrapping the content area and table of contents.
+    - `#content-side-layout` — Side-by-side layout container for content and table of contents.
+    - `#header` — Page-level header element.
+    - `#banner` — Announcement banner displayed above the navbar.
+    - `#footer` — Page footer.
+    - `#page-title` — The `<h1>` heading at the top of each page.
+    - `#pagination` — Bottom pagination bar with previous and next page links.
+    - `#panel` — Floating panel overlay.
+    - `#background-color` — Page background color element.
+    - `#almond-background-color` — Background color element for the Almond theme.
+
+    **Navigation**
+
+    - `#navbar` — Top navigation bar.
+    - `#navbar-transition` — Navbar transition animation wrapper.
+    - `#navigation-items` — Container for top-level navigation items.
+    - `#topbar-cta-button` — Call-to-action button in the topbar.
+    - `#mobile-nav` — Mobile navigation overlay.
+    - `#mobile-nav-content` — Content area within the mobile navigation overlay.
+
+    **Sidebar**
+
+    - `#sidebar` — The sidebar navigation panel.
+    - `#sidebar-content` — Scrollable content area within the sidebar.
+
+    **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.
+
+    **Search**
+
+    - `#search-bar-entry` — Search bar trigger in the topbar.
+    - `#search-bar-entry-mobile` — Search bar trigger on mobile.
+    - `#search-input` — Text input field within the search modal.
+
+    **AI assistant**
+
+    - `#assistant-entry` — AI assistant button in the topbar.
+    - `#assistant-entry-mobile` — AI assistant button on mobile.
+    - `#chat-assistant-sheet` — AI assistant chat panel.
+    - `#chat-assistant-textarea` — Text input within the AI assistant panel.
+
+    **API reference**
+
+    - `#request-example` — Request example panel in the API playground.
+    - `#response-example` — Response example panel in the API playground.
+    - `#api-playground-input` — Input section of the API playground.
+    - `#endpoints-menu-trigger` — Button that opens the endpoint selector dropdown.
+
+    **Code blocks**
+
+    - `#ask-ai-code-block-button` — "Ask AI" button that appears on code blocks.
+    - `#code-snippet-feedback-button` — Feedback button on code snippets.
+    - `#code-snippet-feedback-textarea` — Text area within the code snippet feedback form.
+
+    **Feedback**
+
+    - `#feedback-thumbs-up` — Thumbs-up feedback button at the bottom of a page.
+    - `#feedback-thumbs-down` — Thumbs-down feedback button at the bottom of a page.
+    - `#feedback-form` — Feedback form shown after a thumbs-down response.
+    - `#feedback-form-input` — Text input within the feedback form.
+    - `#feedback-form-cancel` — Cancel button within the feedback form.
+    - `#feedback-form-submit` — Submit button within the feedback form.
+
+    **Page context menu**
+
+    - `#page-context-menu` — Contextual options menu for the current page.
+    - `#page-context-menu-button` — Button that triggers the page context menu.
+
+    **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.
+
+    **Changelog**
+
+    - `#changelog-filters` — Filter controls on a changelog page.
+    - `#changelog-filters-content` — Content area within the changelog filter panel.
+
+    **Multi-view**
+
+    - `#multi-view-dropdown` — Dropdown for switching between documentation views.
+
+    **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>
-  <Accordion title="Selectors">
-    - Accordion: `accordion`
-    - AccordionGroup: `accordion-group`
-    - AlmondLayout: `almond-layout`
-    - AlmondNavBottomSection: `almond-nav-bottom-section`
-    - AlmondNavBottomSectionDivider: `almond-nav-bottom-section-divider`
-    - Anchor: `nav-anchor`
-    - Anchors: `nav-anchors`
-    - APISection: `api-section`
-    - APISectionHeading: `api-section-heading`
-    - APISectionHeadingSubtitle: `api-section-heading-subtitle`
-    - APISectionHeadingTitle: `api-section-heading-title`
-    - Callout: `callout`
-    - Card: `card`
-    - CardGroup: `card-group`
-    - ChatAssistantSheet: `chat-assistant-sheet`
-    - ChatAssistantSheetHeader: `chat-assistant-sheet-header`
-    - ChatAssistantSheetContent: `chat-assistant-sheet-content`
-    - ChatAssistantInput: `chat-assistant-input`
-    - ChatAssistantSendButton: `chat-assistant-send-button`
-    - CodeBlock: `code-block`
-    - CodeGroup: `code-group`
-    - Content: `mdx-content`
-    - DropdownTrigger: `nav-dropdown-trigger`
-    - DropdownContent: `nav-dropdown-content`
-    - DropdownItem: `nav-dropdown-item`
-    - DropdownItemTextContainer: `nav-dropdown-item-text-container`
-    - DropdownItemTitle: `nav-dropdown-item-title`
-    - DropdownItemDescription: `nav-dropdown-item-description`
-    - DropdownItemIcon: `nav-dropdown-item-icon`
-    - Expandable: `expandable`
-    - Eyebrow: `eyebrow`
-    - FeedbackToolbar: `feedback-toolbar`
-    - Field: `field`
-    - Frame: `frame`
-    - Icon: `icon`
-    - Link: `link`
-    - LoginLink: `login-link`
-    - Logo: `nav-logo`
-    - Mermaid: `mermaid`
-    - MethodNavPill: `method-nav-pill`
-    - MethodPill: `method-pill`
-    - NavBarLink: `navbar-link`
-    - NavTagPill: `nav-tag-pill`
-    - NavTagPillText: `nav-tag-pill-text`
-    - OptionDropdown: `option-dropdown`
-    - PaginationNext: `pagination-next`
-    - PaginationPrev: `pagination-prev`
-    - PaginationTitle: `pagination-title`
-    - Panel: `panel`
-    - SidebarGroup: `sidebar-group`
-    - SidebarGroupIcon: `sidebar-group-icon`
-    - SidebarGroupHeader: `sidebar-group-header`
-    - SidebarNavGroupDivider: `sidebar-nav-group-divider`
-    - SidebarTitle: `sidebar-title`
-    - Step: `step`
-    - Steps: `steps`
-    - Tab: `tab`
-    - Tabs: `tabs`
-    - TabsBar: `nav-tabs`
-    - TabsBarItem: `nav-tabs-item`
-    - TableOfContents: `toc`
-    - TableOfContentsItem: `toc-item`
-    - Tooltip: `tooltip`
-    - TopbarRightContainer: `topbar-right-container`
-    - TryitButton: `tryit-button`
-    - Update: `update`
+  <Accordion title="Element selectors">
+    Multiple instances of these elements can appear on a page. Use these as `value` in CSS. For example, `accordion { border: 1px solid red; }`.
+
+    **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.
+    - `code-block` — Code block element.
+    - `code-block-icon` — Icon displayed in a code block header.
+    - `code-group` — Tabbed group of code blocks.
+    - `expandable` — Expandable section element.
+    - `frame` — Frame wrapper for images or embedded content.
+    - `icon` — Inline icon element.
+    - `mermaid` — Mermaid diagram wrapper.
+    - `step` — Individual step within a steps sequence.
+    - `steps` — Numbered steps container.
+    - `tab` — Individual tab within a tabs group.
+    - `tab-icon` — Icon displayed within a tab.
+    - `tabs` — Tabbed content container.
+    - `tile` — Tile component element.
+    - `tooltip` — Tooltip element.
+    - `update` — Changelog update entry.
+
+    **Page layout**
+
+    - `mdx-content` — Rendered MDX content area.
+    - `panel` — Floating panel component.
+    - `eyebrow` — Small label displayed above a page title.
+    - `link` — Anchor link element.
+    - `breadcrumb-list` — Breadcrumb navigation list.
+    - `breadcrumb-item` — Individual breadcrumb item.
+
+    **Topbar navigation**
+
+    - `nav-logo` — Logo in the navigation bar.
+    - `navbar-link` — Link element within the navigation bar.
+    - `nav-anchors` — Container for anchor links in the topbar.
+    - `nav-anchor` — Individual anchor link in the topbar.
+    - `nav-tabs` — Tab bar in the top navigation.
+    - `nav-tabs-item` — Individual tab item in the top navigation tab bar.
+    - `mobile-nav-tabs-item` — Tab item in the mobile navigation tab bar.
+    - `topbar-right-container` — Right section of the topbar.
+    - `nav-tag-pill` — Tag pill shown in the navigation.
+    - `nav-tag-pill-text` — Text within a navigation tag pill.
+
+    **Topbar dropdown**
+
+    - `nav-dropdown-trigger` — Button that opens a navigation dropdown.
+    - `nav-dropdown-content` — Content container for a navigation dropdown.
+    - `nav-dropdown-item` — Individual item within a navigation dropdown.
+    - `nav-dropdown-item-text-container` — Text wrapper within a dropdown item.
+    - `nav-dropdown-item-title` — Title text within a dropdown item.
+    - `nav-dropdown-item-description` — Description text within a dropdown item.
+    - `nav-dropdown-item-icon` — Icon within a dropdown item.
+
+    **Products selector**
+
+    - `nav-dropdown-products-selector-trigger` — Button that opens the products selector dropdown.
+    - `nav-dropdown-products-selector-content` — Content container for the products selector.
+    - `nav-dropdown-products-selector-item` — Individual product in the selector.
+    - `nav-dropdown-products-selector-item-title` — Title of a product selector item.
+    - `nav-dropdown-products-selector-item-description` — Description of a product selector item.
+    - `nav-dropdown-products-selector-item-icon` — Icon of a product selector item.
+
+    **Sidebar**
+
+    - `sidebar-group` — Group of related sidebar links.
+    - `sidebar-group-icon` — Icon for a sidebar group.
+    - `sidebar-group-header` — Header label for a sidebar group.
+    - `sidebar-title` — Top-level title in the sidebar.
+    - `sidebar-nav-group-divider` — Divider between sidebar navigation groups.
+
+    **Table of contents**
+
+    - `toc` — Table of contents container.
+    - `toc-item` — Individual heading entry in the table of contents.
+
+    **Footer**
+
+    - `footer` — Standard page footer.
+    - `advanced-footer` — Extended footer with additional columns or content.
+
+    **Pagination**
+
+    - `pagination-prev` — Previous page link in the pagination bar.
+    - `pagination-next` — Next page link in the pagination bar.
+    - `pagination-title` — Page title shown in the pagination bar.
+
+    **API reference**
+
+    - `api-section` — Full section for a single API endpoint.
+    - `api-section-heading` — Heading area for an API endpoint section.
+    - `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.
+    - `prompt` — Prompt component in the API reference.
+
+    **AI assistant**
+
+    - `chat-assistant-sheet` — AI assistant panel container.
+    - `chat-assistant-sheet-header` — Header of the AI assistant panel.
+    - `chat-assistant-sheet-content` — Content area of the AI assistant panel.
+    - `chat-assistant-input` — Text input within the AI assistant panel.
+    - `chat-assistant-floating-input` — Floating input variant of the AI assistant.
+    - `chat-assistant-send-button` — Send button in the AI assistant panel.
+    - `chat-assistant-disclaimer-text` — Disclaimer text displayed in the AI assistant panel.
+    - `chat-assistant-payload-item` — Individual message or result item in the assistant panel.
+    - `starter-question-text` — Suggested starter question shown in an empty assistant panel.
+
+    **Feedback**
+
+    - `feedback-toolbar` — Toolbar containing page feedback controls.
+    - `contextual-feedback-container` — Container for contextual inline feedback.
+    - `contextual-feedback-form` — Inline contextual feedback form.
+    - `contextual-feedback-form-title` — Title of the contextual feedback form.
+    - `contextual-feedback-input` — Text input within the contextual feedback form.
+    - `contextual-feedback-button` — Action button within the contextual feedback form.
+    - `contextual-feedback-form-submit-button` — Submit button for the contextual feedback form.
+
+    **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-button` — Button that triggers code snippet feedback.
+    - `code-snippet-feedback-textarea` — Text area within the code snippet feedback form.
+    - `code-snippet-feedback-form-title` — Title of the code snippet feedback form.
+    - `code-snippet-feedback-form-description` — Description text in the code snippet feedback form.
+    - `code-snippet-feedback-form-submit-button` — Submit button for the code snippet feedback form.
+
+    **Authentication**
+
+    - `login-link` — Link that initiates the login flow.
+    - `logout-link` — Link that initiates the logout flow.
+
+    **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.
+
+    **Directory**
+
+    - `directory` — Root container for a directory page.
+    - `directory-group` — Group of related pages within a directory.
+    - `directory-page` — Individual page entry in a directory.
+    - `directory-card` — Card-style page entry in a directory.
+
+    **404 page**
+
+    - `not-found-container` — Root container of the 404 page.
+    - `not-found-status-code` — Status code display on the 404 page.
+    - `not-found-title` — Title heading on the 404 page.
+    - `not-found-description` — Description text on the 404 page.
+    - `not-found-logo` — Logo image on the 404 page.
+    - `not-found-logo-container` — Wrapper for the logo on the 404 page.
+    - `not-found-message` — Message shown to the user on the 404 page.
+    - `not-found-go-back-button` — "Go back" button on the 404 page.
+    - `not-found-go-back-arrow` — Arrow icon within the "go back" button.
+    - `not-found-go-back-text` — Label text within the "go back" button.
+    - `not-found-recommended-pages-list` — List of recommended pages shown on the 404 page.
+    - `not-found-recommended-page-link` — Individual link in the recommended pages list.
+
+    **Color**
+
+    - `color` — Color swatch element.
+    - `color-row` — Row grouping color swatches.
+    - `color-item` — Individual color item within a color row.
+
+    **Tree**
+
+    - `tree` — File tree container.
+    - `tree-folder` — Folder entry within a file tree.
+    - `tree-file` — File entry within a file tree.
+
+    **Almond theme**
+
+    - `almond-layout` — Root layout element for the Almond theme.
+    - `almond-nav-bottom-section` — Bottom section of the Almond theme navigation.
+    - `almond-nav-bottom-section-divider` — Divider in the bottom section of the Almond theme navigation.
 
     **Data attributes**
 
@@ -203,16 +385,14 @@ Mintlify has a set of common identifiers and selectors to help you tag important
   </Accordion>
 </AccordionGroup>
 
-<Warning>
-  References and the styling of common elements are subject to change as the platform evolves. Please use custom styling with caution.
-</Warning>
+<Tip>
+  Use inspect element to find references to elements you're looking to customize.
+</Tip>
 
 ## Custom JavaScript
 
 Custom JS allows you to add custom executable code globally. It is the equivalent of adding a `<script>` tag with JS code into every page.
 
-### Adding custom JavaScript
-
 Mintlify includes any `.js` file inside your content directory on every page of your documentation site. For example, you can add the following `ga.js` file to enable [Google Analytics](https://marketingplatform.google.com/about/analytics) across the entire documentation.
 
 ```js

From c31e71621f730e33993de261bd48736ce54d3d1d Mon Sep 17 00:00:00 2001
From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
Date: Mon, 20 Apr 2026 10:58:30 -0700
Subject: [PATCH 2/6] remove unused selectors

---
 customize/custom-scripts.mdx | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/customize/custom-scripts.mdx b/customize/custom-scripts.mdx
index 4edce752d..9611a7d27 100644
--- a/customize/custom-scripts.mdx
+++ b/customize/custom-scripts.mdx
@@ -72,7 +72,6 @@ Mintlify exposes two types of CSS targeting hooks:
     - `#pagination` — Bottom pagination bar with previous and next page links.
     - `#panel` — Floating panel overlay.
     - `#background-color` — Page background color element.
-    - `#almond-background-color` — Background color element for the Almond theme.
 
     **Navigation**
 
@@ -318,12 +317,6 @@ Mintlify exposes two types of CSS targeting hooks:
     - `not-found-status-code` — Status code display on the 404 page.
     - `not-found-title` — Title heading on the 404 page.
     - `not-found-description` — Description text on the 404 page.
-    - `not-found-logo` — Logo image on the 404 page.
-    - `not-found-logo-container` — Wrapper for the logo on the 404 page.
-    - `not-found-message` — Message shown to the user on the 404 page.
-    - `not-found-go-back-button` — "Go back" button on the 404 page.
-    - `not-found-go-back-arrow` — Arrow icon within the "go back" button.
-    - `not-found-go-back-text` — Label text within the "go back" button.
     - `not-found-recommended-pages-list` — List of recommended pages shown on the 404 page.
     - `not-found-recommended-page-link` — Individual link in the recommended pages list.
 
@@ -339,12 +332,6 @@ Mintlify exposes two types of CSS targeting hooks:
     - `tree-folder` — Folder entry within a file tree.
     - `tree-file` — File entry within a file tree.
 
-    **Almond theme**
-
-    - `almond-layout` — Root layout element for the Almond theme.
-    - `almond-nav-bottom-section` — Bottom section of the Almond theme navigation.
-    - `almond-nav-bottom-section-divider` — Divider in the bottom section of the Almond theme navigation.
-
     **Data attributes**
 
     Some elements expose data attributes you can use as CSS selectors.

From f0b00a979ff557218269be94773320ef31a52e3e Mon Sep 17 00:00:00 2001
From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
Date: Mon, 20 Apr 2026 11:01:01 -0700
Subject: [PATCH 3/6] remove unused selectors

---
 customize/custom-scripts.mdx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/customize/custom-scripts.mdx b/customize/custom-scripts.mdx
index 9611a7d27..7b2818cdc 100644
--- a/customize/custom-scripts.mdx
+++ b/customize/custom-scripts.mdx
@@ -174,7 +174,6 @@ Mintlify exposes two types of CSS targeting hooks:
     - `mermaid` — Mermaid diagram wrapper.
     - `step` — Individual step within a steps sequence.
     - `steps` — Numbered steps container.
-    - `tab` — Individual tab within a tabs group.
     - `tab-icon` — Icon displayed within a tab.
     - `tabs` — Tabbed content container.
     - `tile` — Tile component element.
@@ -285,7 +284,6 @@ Mintlify exposes two types of CSS targeting hooks:
 
     - `code-snippet-feedback-popover-content` — Popover content for code snippet feedback.
     - `code-snippet-feedback-form` — Feedback form for a code snippet.
-    - `code-snippet-feedback-button` — Button that triggers code snippet feedback.
     - `code-snippet-feedback-textarea` — Text area within the code snippet feedback form.
     - `code-snippet-feedback-form-title` — Title of the code snippet feedback form.
     - `code-snippet-feedback-form-description` — Description text in the code snippet feedback form.

From 29888f9ae373cc2126323db8a783c06c479749ae Mon Sep 17 00:00:00 2001
From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
Date: Mon, 20 Apr 2026 11:03:46 -0700
Subject: [PATCH 4/6] Update custom-scripts.mdx

---
 customize/custom-scripts.mdx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/customize/custom-scripts.mdx b/customize/custom-scripts.mdx
index 7b2818cdc..1a69ee389 100644
--- a/customize/custom-scripts.mdx
+++ b/customize/custom-scripts.mdx
@@ -63,8 +63,6 @@ Mintlify exposes two types of CSS targeting hooks:
     - `#body-content` — Outermost wrapper for the page body.
     - `#content-area` — Primary content area, excluding the sidebar and table of contents.
     - `#content` — Inner content element within the content area.
-    - `#content-container` — Container wrapping the content area and table of contents.
-    - `#content-side-layout` — Side-by-side layout container for content and table of contents.
     - `#header` — Page-level header element.
     - `#banner` — Announcement banner displayed above the navbar.
     - `#footer` — Page footer.
@@ -76,8 +74,6 @@ Mintlify exposes two types of CSS targeting hooks:
     **Navigation**
 
     - `#navbar` — Top navigation bar.
-    - `#navbar-transition` — Navbar transition animation wrapper.
-    - `#navigation-items` — Container for top-level navigation items.
     - `#topbar-cta-button` — Call-to-action button in the topbar.
     - `#mobile-nav` — Mobile navigation overlay.
     - `#mobile-nav-content` — Content area within the mobile navigation overlay.

From 77d8a9146ecb527f8b5aaa50e522654ed1eaa635 Mon Sep 17 00:00:00 2001
From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
Date: Mon, 20 Apr 2026 11:35:31 -0700
Subject: [PATCH 5/6] reorganize content

---
 customize/custom-scripts.mdx | 329 ++++++++++++++++-------------------
 1 file changed, 148 insertions(+), 181 deletions(-)

diff --git a/customize/custom-scripts.mdx b/customize/custom-scripts.mdx
index 1a69ee389..34e1c59ce 100644
--- a/customize/custom-scripts.mdx
+++ b/customize/custom-scripts.mdx
@@ -30,6 +30,15 @@ Tailwind CSS arbitrary values are not supported. For custom values, use the `sty
 
 Add CSS files to your repository to apply their defined class names and make them available in all of your MDX files.
 
+Mintlify exposes two types of CSS targeting hooks:
+
+- **ID selectors**: unique page-level elements targeted with `#value { }` in CSS
+- **Element selectors**: component and layout elements targeted with `value { }` in CSS (no `#` or `.` prefix)
+
+<Warning>
+  References and the styling of common elements are subject to change. Use custom styling with caution. Breaking changes may occur in future updates.
+</Warning>
+
 For example, you can add the following `style.css` file to customize the styling of the navbar and footer.
 
 ```css
@@ -43,118 +52,96 @@ footer {
 }
 ```
 
-### Identifiers and selectors
+### ID selectors
 
-<Warning>
-  References and the styling of common elements are subject to change. Use custom styling with caution. Breaking changes may occur in future updates.
-</Warning>
-
-Mintlify exposes two types of CSS targeting hooks:
-
-- **ID selectors**: unique page-level elements targeted with `#value { }` in CSS
-- **Element selectors**: component and layout elements targeted with `value { }` in CSS (no `#` or `.` prefix)
+Each ID appears once per page. Use these as `#value` in CSS. For example, `#navbar { background: red; }`.
 
 <AccordionGroup>
-  <Accordion title="ID selectors">
-    Each ID appears once per page. Use these as `#value` in CSS. For example, `#navbar { background: red; }`.
-
-    **Page layout**
-
-    - `#body-content` — Outermost wrapper for the page body.
-    - `#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.
-    - `#page-title` — The `<h1>` heading at the top of each page.
-    - `#pagination` — Bottom pagination bar with previous and next page links.
-    - `#panel` — Floating panel overlay.
-    - `#background-color` — Page background color element.
-
-    **Navigation**
-
-    - `#navbar` — Top navigation bar.
-    - `#topbar-cta-button` — Call-to-action button in the topbar.
-    - `#mobile-nav` — Mobile navigation overlay.
-    - `#mobile-nav-content` — Content area within the mobile navigation overlay.
-
-    **Sidebar**
-
-    - `#sidebar` — The sidebar navigation panel.
-    - `#sidebar-content` — Scrollable content area within the sidebar.
-
-    **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.
-
-    **Search**
-
-    - `#search-bar-entry` — Search bar trigger in the topbar.
-    - `#search-bar-entry-mobile` — Search bar trigger on mobile.
-    - `#search-input` — Text input field within the search modal.
-
-    **AI assistant**
-
-    - `#assistant-entry` — AI assistant button in the topbar.
-    - `#assistant-entry-mobile` — AI assistant button on mobile.
-    - `#chat-assistant-sheet` — AI assistant chat panel.
-    - `#chat-assistant-textarea` — Text input within the AI assistant panel.
-
-    **API reference**
-
-    - `#request-example` — Request example panel in the API playground.
-    - `#response-example` — Response example panel in the API playground.
-    - `#api-playground-input` — Input section of the API playground.
-    - `#endpoints-menu-trigger` — Button that opens the endpoint selector dropdown.
-
-    **Code blocks**
-
-    - `#ask-ai-code-block-button` — "Ask AI" button that appears on code blocks.
-    - `#code-snippet-feedback-button` — Feedback button on code snippets.
-    - `#code-snippet-feedback-textarea` — Text area within the code snippet feedback form.
-
-    **Feedback**
-
-    - `#feedback-thumbs-up` — Thumbs-up feedback button at the bottom of a page.
-    - `#feedback-thumbs-down` — Thumbs-down feedback button at the bottom of a page.
-    - `#feedback-form` — Feedback form shown after a thumbs-down response.
-    - `#feedback-form-input` — Text input within the feedback form.
-    - `#feedback-form-cancel` — Cancel button within the feedback form.
-    - `#feedback-form-submit` — Submit button within the feedback form.
-
-    **Page context menu**
-
-    - `#page-context-menu` — Contextual options menu for the current page.
-    - `#page-context-menu-button` — Button that triggers the page context menu.
-
-    **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.
-
-    **Changelog**
-
-    - `#changelog-filters` — Filter controls on a changelog page.
-    - `#changelog-filters-content` — Content area within the changelog filter panel.
-
-    **Multi-view**
-
-    - `#multi-view-dropdown` — Dropdown for switching between documentation views.
-
-    **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 title="Page layout">
+- `#body-content` — Outermost wrapper for the page body.
+- `#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.
+- `#page-title` — The `<h1>` heading at the top of each page.
+- `#pagination` — Bottom pagination bar with previous and next page links.
+- `#panel` — Floating panel overlay.
+- `#background-color` — Page background color element.
+</Accordion>
+<Accordion title="Navigation">
+  - `#navbar` — Top navigation bar.
+  - `#topbar-cta-button` — Call-to-action button in the topbar.
+  - `#mobile-nav` — Mobile navigation overlay.
+  - `#mobile-nav-content` — Content area within the mobile navigation overlay.
+</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.
+  - `#search-bar-entry-mobile` — Search bar trigger on mobile.
+  - `#search-input` — Text input field within the search modal.
+</Accordion>
+<Accordion title="AI assistant">
+  - `#assistant-entry` — AI assistant button in the topbar.
+  - `#assistant-entry-mobile` — AI assistant button on mobile.
+  - `#chat-assistant-sheet` — AI assistant chat panel.
+  - `#chat-assistant-textarea` — Text input within the AI assistant panel.
+</Accordion>
+<Accordion title="API reference">
+  - `#request-example` — Request example panel in the API playground.
+  - `#response-example` — Response example panel in the API playground.
+  - `#api-playground-input` — Input section of the API playground.
+  - `#endpoints-menu-trigger` — Button that opens the endpoint selector dropdown.
+</Accordion>
+<Accordion title="Code blocks">
+  - `#ask-ai-code-block-button` — "Ask AI" button that appears on code blocks.
+  - `#code-snippet-feedback-button` — Feedback button on code snippets.
+  - `#code-snippet-feedback-textarea` — Text area within the code snippet feedback form.
+</Accordion>
+<Accordion title="Feedback">
+  - `#feedback-thumbs-up` — Thumbs-up feedback button at the bottom of a page.
+  - `#feedback-thumbs-down` — Thumbs-down feedback button at the bottom of a page.
+  - `#feedback-form` — Feedback form shown after a thumbs-down response.
+  - `#feedback-form-input` — Text input within the feedback form.
+  - `#feedback-form-cancel` — Cancel button within the feedback form.
+  - `#feedback-form-submit` — Submit button within the feedback form.
+</Accordion>
+<Accordion title="Page context menu">
+  - `#page-context-menu` — Contextual options menu for the current page.
+  - `#page-context-menu-button` — Button that triggers the page context menu.
+</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">
+  - `#changelog-filters` — Filter controls on a changelog page.
+  - `#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>
 
-  </Accordion>
-  <Accordion title="Element selectors">
-    Multiple instances of these elements can appear on a page. Use these as `value` in CSS. For example, `accordion { border: 1px solid red; }`.
+### Element selectors
 
-    **Content components**
+Multiple instances of these elements can appear on a page. Use these as `value` in CSS. For example, `accordion { border: 1px solid red; }`.
 
+<AccordionGroup>
+  <Accordion title="Content components">
     - `accordion` — Collapsible accordion item.
     - `accordion-group` — Wrapper grouping multiple accordions.
     - `callout` — Callout block (Note, Warning, Tip, etc.).
@@ -175,18 +162,16 @@ Mintlify exposes two types of CSS targeting hooks:
     - `tile` — Tile component element.
     - `tooltip` — Tooltip element.
     - `update` — Changelog update entry.
-
-    **Page layout**
-
+  </Accordion>
+  <Accordion title="Page layout">
     - `mdx-content` — Rendered MDX content area.
     - `panel` — Floating panel component.
     - `eyebrow` — Small label displayed above a page title.
     - `link` — Anchor link element.
     - `breadcrumb-list` — Breadcrumb navigation list.
     - `breadcrumb-item` — Individual breadcrumb item.
-
-    **Topbar navigation**
-
+  </Accordion>
+  <Accordion title="Topbar navigation">
     - `nav-logo` — Logo in the navigation bar.
     - `navbar-link` — Link element within the navigation bar.
     - `nav-anchors` — Container for anchor links in the topbar.
@@ -197,9 +182,8 @@ Mintlify exposes two types of CSS targeting hooks:
     - `topbar-right-container` — Right section of the topbar.
     - `nav-tag-pill` — Tag pill shown in the navigation.
     - `nav-tag-pill-text` — Text within a navigation tag pill.
-
-    **Topbar dropdown**
-
+  </Accordion>
+  <Accordion title="Topbar dropdown">
     - `nav-dropdown-trigger` — Button that opens a navigation dropdown.
     - `nav-dropdown-content` — Content container for a navigation dropdown.
     - `nav-dropdown-item` — Individual item within a navigation dropdown.
@@ -207,42 +191,36 @@ Mintlify exposes two types of CSS targeting hooks:
     - `nav-dropdown-item-title` — Title text within a dropdown item.
     - `nav-dropdown-item-description` — Description text within a dropdown item.
     - `nav-dropdown-item-icon` — Icon within a dropdown item.
-
-    **Products selector**
-
+  </Accordion>
+  <Accordion title="Products selector">
     - `nav-dropdown-products-selector-trigger` — Button that opens the products selector dropdown.
     - `nav-dropdown-products-selector-content` — Content container for the products selector.
     - `nav-dropdown-products-selector-item` — Individual product in the selector.
     - `nav-dropdown-products-selector-item-title` — Title of a product selector item.
     - `nav-dropdown-products-selector-item-description` — Description of a product selector item.
     - `nav-dropdown-products-selector-item-icon` — Icon of a product selector item.
-
-    **Sidebar**
-
+  </Accordion>
+  <Accordion title="Sidebar">
     - `sidebar-group` — Group of related sidebar links.
     - `sidebar-group-icon` — Icon for a sidebar group.
     - `sidebar-group-header` — Header label for a sidebar group.
     - `sidebar-title` — Top-level title in the sidebar.
     - `sidebar-nav-group-divider` — Divider between sidebar navigation groups.
-
-    **Table of contents**
-
+  </Accordion>
+  <Accordion title="Table of contents">
     - `toc` — Table of contents container.
     - `toc-item` — Individual heading entry in the table of contents.
-
-    **Footer**
-
+  </Accordion>
+  <Accordion title="Footer">
     - `footer` — Standard page footer.
     - `advanced-footer` — Extended footer with additional columns or content.
-
-    **Pagination**
-
+  </Accordion>
+  <Accordion title="Pagination">
     - `pagination-prev` — Previous page link in the pagination bar.
     - `pagination-next` — Next page link in the pagination bar.
     - `pagination-title` — Page title shown in the pagination bar.
-
-    **API reference**
-
+  </Accordion>
+  <Accordion title="API reference">
     - `api-section` — Full section for a single API endpoint.
     - `api-section-heading` — Heading area for an API endpoint section.
     - `api-section-heading-title` — Title within an API endpoint section heading.
@@ -253,9 +231,8 @@ Mintlify exposes two types of CSS targeting hooks:
     - `method-pill` — HTTP method badge (GET, POST, etc.) on an endpoint.
     - `method-nav-pill` — HTTP method badge shown in the sidebar navigation.
     - `prompt` — Prompt component in the API reference.
-
-    **AI assistant**
-
+  </Accordion>
+  <Accordion title="AI assistant">
     - `chat-assistant-sheet` — AI assistant panel container.
     - `chat-assistant-sheet-header` — Header of the AI assistant panel.
     - `chat-assistant-sheet-content` — Content area of the AI assistant panel.
@@ -265,9 +242,8 @@ Mintlify exposes two types of CSS targeting hooks:
     - `chat-assistant-disclaimer-text` — Disclaimer text displayed in the AI assistant panel.
     - `chat-assistant-payload-item` — Individual message or result item in the assistant panel.
     - `starter-question-text` — Suggested starter question shown in an empty assistant panel.
-
-    **Feedback**
-
+  </Accordion>
+  <Accordion title="Feedback">
     - `feedback-toolbar` — Toolbar containing page feedback controls.
     - `contextual-feedback-container` — Container for contextual inline feedback.
     - `contextual-feedback-form` — Inline contextual feedback form.
@@ -275,94 +251,85 @@ Mintlify exposes two types of CSS targeting hooks:
     - `contextual-feedback-input` — Text input within the contextual feedback form.
     - `contextual-feedback-button` — Action button within the contextual feedback form.
     - `contextual-feedback-form-submit-button` — Submit button for the contextual feedback form.
-
-    **Code snippet feedback**
-
+  </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.
     - `code-snippet-feedback-form-description` — Description text in the code snippet feedback form.
     - `code-snippet-feedback-form-submit-button` — Submit button for the code snippet feedback form.
-
-    **Authentication**
-
+  </Accordion>
+  <Accordion title="Authentication">
     - `login-link` — Link that initiates the login flow.
     - `logout-link` — Link that initiates the logout flow.
-
-    **Multi-view**
-
+  </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.
-
-    **Directory**
-
+  </Accordion>
+  <Accordion title="Directory">
     - `directory` — Root container for a directory page.
     - `directory-group` — Group of related pages within a directory.
     - `directory-page` — Individual page entry in a directory.
     - `directory-card` — Card-style page entry in a directory.
-
-    **404 page**
-
+  </Accordion>
+  <Accordion title="404 page">
     - `not-found-container` — Root container of the 404 page.
     - `not-found-status-code` — Status code display on the 404 page.
     - `not-found-title` — Title heading on the 404 page.
     - `not-found-description` — Description text on the 404 page.
     - `not-found-recommended-pages-list` — List of recommended pages shown on the 404 page.
     - `not-found-recommended-page-link` — Individual link in the recommended pages list.
-
-    **Color**
-
+  </Accordion>
+  <Accordion title="Color">
     - `color` — Color swatch element.
     - `color-row` — Row grouping color swatches.
     - `color-item` — Individual color item within a color row.
-
-    **Tree**
-
+  </Accordion>
+  <Accordion title="Tree">
     - `tree` — File tree container.
     - `tree-folder` — Folder entry within a file tree.
     - `tree-file` — File entry within a file tree.
-
-    **Data attributes**
-
+  </Accordion>
+  <Accordion title="Data attributes">
     Some elements expose data attributes you can use as CSS selectors.
 
     Active state (`data-active`):
 
-    - Active item in a nav dropdown: `nav-dropdown-item[data-active]`
-    - Active tab in the mobile nav: `mobile-nav-tabs-item[data-active]`
-    - Active sidebar group: `sidebar-group[data-active]`
-    - Active sidebar link: `#sidebar-content li[data-active]`
-    - Active top nav tab: `.nav-tabs-item[data-active]` — only applies to simple tabs; tabs with dropdown menus do not receive `data-active`. Note the leading `.`: this targets a class on a standard `<a>` element, unlike most other components which use custom element names.
-    - Active table of contents item: `toc-item[data-active]`
-    - Deepest active table of contents item: `toc-item[data-active-deepest]` — only present on the exact heading currently in view, unlike `data-active` which is also set on its parent headings.
+    - `nav-dropdown-item[data-active]` — Active item in a nav dropdown.
+    - `mobile-nav-tabs-item[data-active]` — Active tab in the mobile nav.
+    - `sidebar-group[data-active]` — Active sidebar group.
+    - `#sidebar-content li[data-active]` — Active sidebar link.
+    - `.nav-tabs-item[data-active]` — Active top nav tab. Only applies to simple tabs; tabs with dropdown menus do not receive `data-active`. Note the leading `.`: this targets a class on a standard `<a>` element, unlike most other components which use custom element names.
+    - `toc-item[data-active]` — Active table of contents item.
+    - `toc-item[data-active-deepest]` — Deepest active table of contents item. Only present on the exact heading currently in view, unlike `data-active` which is also set on its parent headings.
 
     Component name (`data-component-name`):
 
     Use `data-component-name` to target specific UI components with a stable selector that persists if internal class names change.
 
-    - Mermaid diagram wrapper: `[data-component-name="mermaid-container"]` — includes the zoom controls overlay
-    - Mermaid zoom and pan controls: `[data-component-name="mermaid-controls-wrapper"]`
-    - Primary header button: `[data-component-name="primary-header-button"]` — Sequoia theme only
-    - Theme toggle: `[data-component-name="theme-toggle"]`
+    - `[data-component-name="mermaid-container"]` — Mermaid diagram wrapper, including the zoom controls overlay.
+    - `[data-component-name="mermaid-controls-wrapper"]` — Mermaid zoom and pan controls.
+    - `[data-component-name="primary-header-button"]` — Primary header button. Sequoia theme only.
+    - `[data-component-name="theme-toggle"]` — Theme toggle.
 
     Component part (`data-component-part`):
 
     Use `data-component-part` to target sub-elements within a component.
 
-    - Contact support button: `[data-component-part="contact-support-button"]` — the `<a>` wrapper around the contact support link in the assistant panel
-    - Contact support icon: `[data-component-part="contact-support-icon"]` — the `<span>` wrapping the icon
-    - Contact support text: `[data-component-part="contact-support-text"]` — the `<p>` element containing the label
+    - `[data-component-part="contact-support-button"]` — The `<a>` wrapper around the contact support link in the assistant panel.
+    - `[data-component-part="contact-support-icon"]` — The `<span>` wrapping the icon.
+    - `[data-component-part="contact-support-text"]` — The `<p>` element containing the label.
 
     Badge attributes:
 
-    - Badge: `[data-badge]`
-    - Badge by color: `[data-badge][data-color="blue"]`
-    - Badge by size: `[data-badge][data-size="sm"]`
-
+    - `[data-badge]` — Any badge element.
+    - `[data-badge][data-color="blue"]` — Badge filtered by color.
+    - `[data-badge][data-size="sm"]` — Badge filtered by size.
   </Accordion>
 </AccordionGroup>
 

From f6e661f10769cc389fb2571bb5d7dd55d8b0915b Mon Sep 17 00:00:00 2001
From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
Date: Mon, 20 Apr 2026 11:42:03 -0700
Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=92=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 customize/custom-scripts.mdx | 46 +++++++++++++++++-------------------
 1 file changed, 22 insertions(+), 24 deletions(-)

diff --git a/customize/custom-scripts.mdx b/customize/custom-scripts.mdx
index 34e1c59ce..6a0a02dd1 100644
--- a/customize/custom-scripts.mdx
+++ b/customize/custom-scripts.mdx
@@ -30,14 +30,7 @@ Tailwind CSS arbitrary values are not supported. For custom values, use the `sty
 
 Add CSS files to your repository to apply their defined class names and make them available in all of your MDX files.
 
-Mintlify exposes two types of CSS targeting hooks:
-
-- **ID selectors**: unique page-level elements targeted with `#value { }` in CSS
-- **Element selectors**: component and layout elements targeted with `value { }` in CSS (no `#` or `.` prefix)
-
-<Warning>
-  References and the styling of common elements are subject to change. Use custom styling with caution. Breaking changes may occur in future updates.
-</Warning>
+The references and styling of common elements are subject to change. Use custom styling with caution since breaking changes may occur in future updates.
 
 For example, you can add the following `style.css` file to customize the styling of the navbar and footer.
 
@@ -52,22 +45,31 @@ footer {
 }
 ```
 
+Mintlify exposes two types of CSS targeting hooks:
+
+- **ID selectors**: unique page-level elements targeted with `#value { }` in CSS
+- **Element selectors**: component and layout elements targeted with `value { }` in CSS (no `#` or `.` prefix)
+
+<Tip>
+  Use inspect element to find references to elements you're looking to customize.
+</Tip>
+
 ### ID selectors
 
 Each ID appears once per page. Use these as `#value` in CSS. For example, `#navbar { background: red; }`.
 
 <AccordionGroup>
 <Accordion title="Page layout">
-- `#body-content` — Outermost wrapper for the page body.
-- `#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.
-- `#page-title` — The `<h1>` heading at the top of each page.
-- `#pagination` — Bottom pagination bar with previous and next page links.
-- `#panel` — Floating panel overlay.
-- `#background-color` — Page background color element.
+  - `#body-content` — Outermost wrapper for the page body.
+  - `#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.
+  - `#panel` — Floating panel overlay. Also targetable as an element selector: `panel`.
+  - `#background-color` — Page background color element.
 </Accordion>
 <Accordion title="Navigation">
   - `#navbar` — Top navigation bar.
@@ -165,7 +167,7 @@ Multiple instances of these elements can appear on a page. Use these as `value`
   </Accordion>
   <Accordion title="Page layout">
     - `mdx-content` — Rendered MDX content area.
-    - `panel` — Floating panel component.
+    - `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.
@@ -212,7 +214,7 @@ Multiple instances of these elements can appear on a page. Use these as `value`
     - `toc-item` — Individual heading entry in the table of contents.
   </Accordion>
   <Accordion title="Footer">
-    - `footer` — Standard page footer.
+    - `footer` — Standard page footer. Also targetable as an ID selector: `#footer`.
     - `advanced-footer` — Extended footer with additional columns or content.
   </Accordion>
   <Accordion title="Pagination">
@@ -333,10 +335,6 @@ Multiple instances of these elements can appear on a page. Use these as `value`
   </Accordion>
 </AccordionGroup>
 
-<Tip>
-  Use inspect element to find references to elements you're looking to customize.
-</Tip>
-
 ## Custom JavaScript
 
 Custom JS allows you to add custom executable code globally. It is the equivalent of adding a `<script>` tag with JS code into every page.