Puppy's JAI Page Breakdown!
Hi! I'm Puppy (Permanent on JAI) and I do css on JAI! This is the list of elements on the JAI profile page + my methods to select them (to my knowledge). This guide is a WIP. If you see any errors or have any questions, don't hesitate to contact me on discord @ permanentsky or find me on Ko-Fi @ permanent.
PLEASE REMEMBER TO ADHERE TO THE JAI CSS POLICY WHEN CUSTOMIZING YOUR PROFILES.
Elements are listed in order of appearance in the HTML DOM.
(I went through the entire page structure and tried to identify every element, so there are some elements that I have not a clue what their purpose is)
it is strongly recommended you use the LABELS for targeting classes and not their class ID selectors, as those are subject to change frequently
UPDATED: 02/23/2026
N/A = Not Applicable (no equivalent for this field)
To do:
- Adding picture references
- Misc things (tooltips, edit button, etc.)
What's Here:
Default Bot Card Elements
| Element | Label | Class ID Selector |
|---|---|---|
| Default Bot Card Layer 1 (overall container) | .pp-cc-wrapper or .profile-character-card-wrapper |
.css-13wmn96 PREVIOUSLY: .css-1sxhvxh |
| Background Layer 1 | .pp-cc-gradient-1 |
.css-13wmn96>.css-0 |
| Background Layer 2 | .pp-cc-gradient-2 |
.css-dltla |
| Background Layer 3 | .pp-cc-gradient-3 |
.css-1jf56se |
| Main Bot Card Info Container | .profile-character-card-stack |
.css-1s5evre |
| Bot Link (contains name, chat ribbon, bot image) | .profile-character-card-stack-link-component |
.css-1s5evre a:nth-child(1) |
| Bot name container | .profile-character-card-stack-link-component-box |
.css-nlxhw4 |
| Bot name text | .pp-cc-name or .profile-character-card-name-box |
.css-nlxhw4>div |
| Chat ribbon main container | .profile-character-card-stats-box |
.css-10cv7r2 |
| Chat ribbon first span (I don't know what this is here for) | N/A | .css-10cv7r2>.css-1baulvz |
| Chat ribbon outer container (applies the dropshadow and some positioning) | .pp-cc-ribbon or .profile-character-card-ribbon |
._ribbon_1chl9_1 or .css-1ket5wn |
| Chat ribbon shape (gives the ribbon shape with background, box-shadow, clip-path) | .pp-cc-ribbon-wrap or .profile-character-card-ribbon-wrap |
._content_1chl9_11 or .css-wexxj8 |
| Chat ribbon text container (contains chat count and icon) | .pp-cc-chats or .profile-character-card-chats-hstack |
.css-euh5x6 |
| Chat ribbon icon | .pp-cc-chats svg |
.css-euh5x6 svg |
| Chat ribbon number | .pp-cc-chats-count or .profile-character-card-chats-count |
.css-euh5x6 span |
| Bot image container | .profile-character-card-avatar-aspect-ratio |
.css-1q7rmf0 |
| Bot image | .pp-cc-avatar or .profile-character-card-avatar-image |
.css-1q7rmf0 img |
| Username on botcard | .profile-character-card-creator-name-link |
.css-1s5evre a:nth-child(2) |
| Username on botcard text | .pp-cc-creator-name or .profile-character-card-creator-name-box |
.css-1s5evre a:nth-child(2) span |
| Description container | .profile-character-card-description-box |
.css-199gcrh |
| Description paragraph container | .pp-cc-description or .profile-character-card-description-markdown-container |
.css-96l1id |
| Description paragraph text | .pp-cc-description p or .profile-character-card-description-markdown-container p |
.css-96l1id p or .css-199gcrh p |
| Star line separator | .pp-cc-star-line or .profile-character-card-star-line |
.css-1s5evre>div:nth-child(4) or .css-1lgnt2x |
| Star image | .pp-cc-star or .profile-character-card-star |
.css-1s5evre>div:nth-child(4) img or .css-1lgnt2x img |
| Tags container | .pp-cc-tags or .profile-character-card-tags |
.css-4ofde4 |
| Tags list container | N/A | .css-k1urot |
| Limitless tag container | .pp-cc-tags-wrap or .profile-character-card-tags-wrap |
.css-123m5uu |
| Limitless tag styling | .pp-tag-limitless or .profile-character-card-tag-limitless |
.css-123m5uu span |
| All other tags (excluding custom tags) | .pp-cc-tags-wrap-regular or .profile-character-card-tags-wrap or .profile-character-card-tags-wrap-regular |
.css-k1urot>.css-1yp4ln |
| Tag styling | .pp-cc-tags-item or .pp-cc-tags-regular or .pp-tag-[nameoftag] where [nameoftag] corresponds to one of the default tag names e.g. .pp-tag-dominant |
.css-k1urot span |
| Custom tag styling | pp-cc-tags-custom and .pp-tag-[customhere] note the [customhere] portion will match the custom tag you are looking to target in LOWERCASE e.g. .pp-tag-icecream |
.pp-cc-tags-wrap-custom span FORMERLY ..customenabled |
| Token count container | .profile-character-card-box |
.css-1c9wmts |
| Token count text | .pp-cc-tokens-count or .profile-character-card-tokens-count |
.css-1c9wmts p |
Event-Specific Bot Card Elements
Valentine's 2026 (#TheValentine)
| Element | Class ID Selector | Label |
|---|---|---|
| Bot Card Layer 1 (overall container) | .css-1idbk73 |
.pp-cc-wrapper |
| Background Layer 1 | .css-1idbk73>.css-0 |
.pp-cc-gradient-1 |
| Background Layer 2 | .css-dltla |
.pp-cc-gradient-2 |
| Background Layer 3 | .css-sfkyc4 |
.pp-cc-gradient-3 |
| Background Layer 4 | .css-d1itua |
N/A |
| Background Layer 5 | .css-bfvnvu |
N/A |
| Background Layer 6 | .css-16qjfxm |
N/A |
| Bot Name Text | .css-1ani293 |
.pp-cc-name |
| Username Link Container | .css-16f51li |
N/A |
| Star Line Separator | .css-gc4bc9 |
.pp-cc-star-line |
| Star Image | .css-ovzirr |
.pp-cc-star |
Valentine's 2025
| Element | Class ID Selector | Label |
|---|---|---|
| Bot Card Layer 1 (overall container) | .css-1mrg1rp PERVIOUSLY: .css-12lnk4a |
.pp-cc-wrapper |
| Background Layer 1 | .css-1mrg1rp>.css-0 |
.pp-cc-gradient-1 |
| Background Layer 2 | .css-dltla |
.pp-cc-gradient-2 |
| Background Layer 3 | .css-sfkyc4 |
.pp-cc-gradient-3 |
| Background Layer 4 | .css-1ifqy49 |
N/A |
| Background Layer 5 | .css-1drof3r |
N/A |
| Bot Name Text | .css-1on0xzz |
.pp-cc-name |
| Username Link Container | .css-16f51li |
N/A |
| Star Line Separator | .css-1pjvf4r |
.pp-cc-star-line |
| Star Image | .css-1h8fads |
.pp-cc-star |
| Hamster Container | .css-5v5qgx |
N/A |
| Hamster Image | .css-5v5qgx img |
N/A |
New Year 2025
| Element | Class ID Selector | Label |
|---|---|---|
| Bot Card Layer 1 (overall container) | .css-1udesvb PREVIOUSLY: .css-1n07wna |
.pp-cc-wrapper |
| Background Layer 1 | .css-1udesvb>.css-0 |
.pp-cc-gradient-1 |
| Background Layer 2 | .css-dltla |
.pp-cc-gradient-2 |
| Background Layer 3 | .css-1nf28v0 |
.pp-cc-gradient-3 |
| Background Layer 4 | .css-gum7ka |
N/A |
| Background Layer 5 | .css-ke8k8l |
N/A |
| Bot Name Text | .css-kesdt6 |
.pp-cc-name |
| Username Link Container | .css-vquwtv |
N/A |
| Star Line Separator | .css-nackew |
.pp-cc-star-line |
| Star Image | .css-ee63sa |
.pp-cc-star |
| 2025 Stamp | .css-1wqmh16 |
N/A |
Halloween
| Element | Class ID Selector | Label |
|---|---|---|
| Bot Card Layer 1 (overall container) | .css-13wmn96:has(.css-nip9dx) |
.pp-cc-wrapper |
| Background Layer 1 | .css-13wmn96:has(.css-nip9dx)>.css-0 |
.pp-cc-gradient-1 |
| Background Layer 2 | .css-dltla |
.pp-cc-gradient-2 |
| Background Layer 3 | .css-1xy4dr7 |
.pp-cc-gradient-3 |
| Bot Name Text | .css-7l95y2 |
.pp-cc-name |
| Username Link Container | .css-1yeq7x5 |
N/A |
| Star Line Separator | .css-1ov83hg |
.pp-cc-star-line |
| Star Image | .css-w470et |
.pp-cc-star |
| Pumpkin Container | .css-nip9dx |
N/A |
| Pumpkin Image | .css-nip9dx img |
N/A |
Christmas
| Element | Class ID Selector | Label |
|---|---|---|
| Bot Card Layer 1 (overall container) | .css-1hyhy7j PREVIOUSLY: .css-v57joh |
.pp-cc-wrapper |
| Background Layer 1 | .css-1hyhy7j>.css-0 |
.pp-cc-gradient-1 |
| Background Layer 2 | .css-dltla |
.pp-cc-gradient-2 |
| Background Layer 3 | .css-ievdy4 |
.pp-cc-gradient-3 |
| Bot Name Text | .css-6pkpcc |
.pp-cc-name |
| Username Link Container | .css-9pz3h |
N/A |
| Star Line Separator | .css-xr5j9y |
.pp-cc-star-line |
| Star Image | .css-7rspww |
.pp-cc-star |
| Christmas Lights Container | .css-xrg4vd |
N/A |
| Christmas Lights Image | .css-xrg4vd img |
N/A |
Passport To Pages
| Element | Class ID Selector | Label |
|---|---|---|
| Bot Card Layer 1 (overall container) | .css-y0anzw PREVIOUSLY: .css-1dl87xx |
.pp-cc-wrapper |
| Background Layer 1 | .css-y0anzw>.css-0 |
.pp-cc-gradient-1 |
| Background Layer 2 | .css-dltla |
.pp-cc-gradient-2 |
| Background Layer 3 | .css-1vbkq2z |
.pp-cc-gradient-3 |
| Background Layer 4 | .css-14hnweu |
N/A |
| Background Layer 5 | .css-obdrgl |
N/A |
| Background Layer 6 | .css-gcl0iy |
N/A |
| Bot Name Text | .css-vk0mim |
.pp-cc-name |
| Username Link Container | .css-due2rz |
N/A |
| Star Line Separator | .css-z6f8pk |
.pp-cc-star-line |
| Star Image | .css-17nmj64 |
.pp-cc-star |
| Palm Tree Emoji | .css-1awld45 |
N/A |
| Conch Shell Emoji | .css-1cui3us |
N/A |
Holidays 2025
| Element | Class ID Selector | Label |
|---|---|---|
| Bot Card Layer 1 (overall container) | .css-1ej831h |
.pp-cc-wrapper |
| Background Layer 1 | .css-1ej831h>.css-0 |
.pp-cc-gradient-1 |
| Background Layer 2 | .css-dltla |
.pp-cc-gradient-2 |
| Background Layer 3 | .css-111nr3m |
.pp-cc-gradient-3 |
| Background Layer 4 | .css-w89cv5 |
N/A |
| Background Layer 5 | .css-1utqofo |
N/A |
| Bot Name Text | .css-d3yj25 |
.pp-cc-name |
| Username Link Container | .css-9yp4xs |
.profile-character-card-creator-name-link |
| Star Line Separator | .css-17mt2nc |
.pp-cc-star-line |
| Star Image | .css-14orm77 |
.pp-cc-star |
| Snowflake Container | .css-8828od |
N/A |
| Snowflake SVG | .css-8828od svg |
N/A |
| Extra Border Layer 1 | .css-1henxb |
N/A |
| Extra Border Layer 2 | .css-effh3d |
N/A |
Profile Page Elements
Main/General Page Elements
| Element | Label | Class ID Selector |
|---|---|---|
| Body | N/A | body |
| Root | N/A | root |
| Page flex container | N/A | ._wrapper_13xo6_1 |
| Header container | .profile-top-bar-flex-outer or .pp-top-bar-outer |
._header_1lgb1_1 or header PREVIOUSLY: .css-tyeyao |
| Profile main parent container (has side padding) | ._customPadding_qqqm3_15 |
._main_qqqm3_1 or main |
| Profile wrapper container (has top padding) | .profile-page-container |
.css-14l6kwv |
| Profile background (has image background if set) | .pp-page-background or .profile-page-background |
UNIQUE |
| Profile/Botcard flex parent container | .profile-page-flex |
.css-1wfbrwg |
| Footer container | N/A | ._footer_b4zg4_1 or footer |
Profile Box
| Element | Label | Class ID Selector |
|---|---|---|
| Profile box layer 1 (main container) | .pp-uc-background or .profile-uc-background-flex |
.css-1wfbrwg>div:nth-child(1) or .css-vqimyu |
| Background layer 1 | .profile-background-box-1 |
.css-1wfbrwg>div:nth-child(1)>.css-0 |
| Background layer 2 | .profile-background-box-2 |
.css-1wfbrwg>div:nth-child(1)>div:nth-child(2) |
| Background layer 3 | .profile-background-box-3 |
.css-1wfbrwg>div:nth-child(1)>div:nth-child(3) |
| Profile box inner container | .profile-info-wrapper-box |
.css-1wfbrwg>div:nth-child(1)>div:nth-child(4) |
| Profile box inner stack (contains the ordering of user info, bio, and follow/options buttons) | .profile-info-stack |
.css-1wfbrwg>div:nth-child(1)>div>.css-8g8ihq |
| User info main container (contains profile image, username, followers, badges, date joined) | .profile-info-hstack |
.css-1uodvt1 |
| Profile image container | .pp-uc-avatar-container or .profile-avatar-container |
.css-79elbk |
| Profile image | .pp-uc-avatar or .profile-avatar |
.css-18bnokj or .css-79elbk img |
| User info container (contains username, followers, badges, date joined, NOT PFP) | .profile-info-stack-inner |
.css-1uodvt1>.css-8g8ihq |
| Username container | .profile-info-stack-inner-flex |
.css-70qvj9 or .css-1uodvt1>.css-8g8ihq>div:nth-child(1) |
| Username | .pp-uc-title or .profile-title-heading |
.css-70qvj9 h2 or .css-o5an2m or .css-1uodvt1>.css-8g8ihq>div:nth-child(1) h2 |
| Verification badge container | N/A | .css-umxegz |
| Verfication badge | N/A | .css-umxegz span or .css-70qvj9 .css-fo6ddv |
| Moderator badge container | N/A | .css-8amxhq |
| Moderator badge | N/A | .css-8amxhq img |
| Number of followers container | .pp-uc-followers-count or .profile-followers-count |
.css-1uodvt1>.css-8g8ihq>div:nth-child(2) |
| Followers Number | .pp-uc-followers-count span:nth-of-type(1) |
.css-1uodvt1>.css-8g8ihq>div:nth-child(2) span:nth-of-type(1) |
| Followers text | .pp-uc-followers-count span:nth-of-type(2) |
.css-1uodvt1>.css-8g8ihq>div:nth-child(2) span:nth-of-type(2) |
| Event badge container | .profile-badges |
.css-1n7vfh0 PREVIOUSLY .css-hjkukh or .css-1uodvt1>.css-8g8ihq>div:nth-child(3) |
| Event badges (non-specific) | .profile-badge |
.css-x3wokz |
| Event badge image (non-specific) | .profile-badge-img |
.css-1x0d536 |
| Member Since/Date joined | .pp-uc-member-since or .profile-member-since-box |
.css-1uodvt1>.css-8g8ihq>div:nth-child(4) |
| Profile Bio main container | .pp-uc-about-me or .profile-about-me |
.css-1bn1yyx |
| Follow/Options button main container | .pp-uc-about-me + div or .pp-uc-about-me + * |
div:has(>.css-1aq5geu) |
| Follow/Options flex container | div:has(>.profile-uc-follow-flex) |
.css-1aq5geu PREVIOUSLY .css-y9k5u7 |
| Follow button main container | .profile-uc-follow-flex |
.css-1aq5geu>div:nth-child(1) or .css-1vakbk4 |
| Follow button outer styling (border) | .pp-uc-follow-button or .profile-uc-follow-button |
.Btn |
| Follow button inner styling (background) | .pp-uc-follow-button:before or .profile-uc-follow-button:before |
.Btn:before |
| Follow button text | .profile-uc-follow-text |
.Btn span |
| Options button main container | .pp-uc-options-menu or .chakra-menu__menu-button |
.css-15w88gn |
| Options button text | N/A | .css-15w88gn>span:nth-child(1) or .css-xl71ch |
| Options button 3 dots container | N/A | .css-15w88gn>span:nth-child(2) or .css-1hzyiq5 |
| Options button 3 dots | .pp-uc-options-menu svg |
.css-1hzyiq5 svg or .css-15w88gn svg |
Desktop Header
| Element | Label | Class ID Selector |
|---|---|---|
| Header Flex container | N/A | ._wrapper_13xo6_1 FORMERLY ._wrapper_1lcdj_1 |
| Header parent container | profile-top-bar-flex-outer |
._header_1lgb1_1 FORMERLY .css-tyeyao |
| Header inner flex container (contains header sub-containers 1 and 2) | .pp-top-bar or .profile-top-bar or .pp-top-bar-inner |
._bar_1lgb1_26 FORMERLY: .css-151faa7 |
| Header Sub-container 1 (houses the JAI beta logo and search bar) | .profile-top-box-flex-inner or .pp-top-bar-left |
._left_1lgb1_45 PREVIOUSLY .css-17xq282 |
| JAI logo main flex container | .profile-top-bar-logo-box (label is shared with link container below) |
._logoContainer_1lgb1_7 |
| JAI logo main link container | .profile-top-bar-logo-box |
.css-99y9bx PREVIOUSLY .css-17xq282 a or .css-8uj2do |
| JAI logo container (has the background, box-shadow, text-shadow, and backdrop-filter) | .pp-top-bar-logo or .profile-top-bar-logo |
.glow-logo or .css-1bmggo3 FORMERLY: .css-e8xvxi |
| "Janitor" text portion | .pp-top-bar-logo-name or .profile-top-bar-logo-name |
.glow-logo h2 |
| "Beta" text portion | .pp-top-bar-logo-sub-name or .profile-top-bar-logo-sub-name |
.glow-logo p |
| Empty space between the JAI logo and search bar (yes it's an element, not sure why) | .profile-top-box-search-input-spacer-top |
.css-17xejub:nth-of-type(1) |
| Search bar main flex container | .profile-top-bar-search-wrapper |
._searchInputContainer_1lgb1_19 |
| Search bar main container | .profile-top-bar-search-box or .pp-top-bar-search-box |
._container_fgb7n_1 PREVIOUSLY .css-bar9lc |
| Search bar form | .pp-top-bar-search-form |
_form_1d69i_129 |
| Search bar secondary container | .profile-top-bar-search-input-group or .pp-top-bar-search-input-group |
._inputGroup_1d69i_1 FORMERLY .css-1y0e7gb |
| Magnifying glass container | .pp-top-bar-search-icon |
._leftElement_1d69i_8 |
| Magnifying glass subcontainer | N/A | ._searchIcon_1d69i_21 |
| Magnifying glass icon | .pp-top-bar-search-icon svg |
._searchIcon_1d69i_21 svg |
| Search bar background | .pp-top-bar-search or .profile-top-bar-search or .search-input or .pp-top-bar-search-input |
._inputContainer_1d69i_26 |
| Search bar placeholder text | #search-input |
#search-input |
| Search History Parent Container | .pp-top-bar-search-history |
._dropdown_1d69i_108 |
| Individual History Item container | .pp-top-bar-search-history>div or [class*="historyItem_"] |
._historyItem_dg9q2_1 |
| History Item Outer Text Container | [class*="contentSection_"] |
._contentSection_dg9q2_53 |
| Clock Icon Container | [class*="iconWrapper_"] |
._iconWrapper_dg9q2_61 |
| Clock Icon SVG | [class*="iconWrapper_"] svg |
._iconWrapper_dg9q2_61 svg |
| History Item Separator | N/A | ._historyItem_dg9q2_1:after |
| History Item Text | [class*="queryText_"] |
._queryText_dg9q2_67 |
| Remove From History Button | [class*="removeButton_"] |
._removeButton_dg9q2_79 |
| Remove From History X SVG | [class*="removeButton_"] svg |
._removeButton_dg9q2_79 svg |
| Small space at end of search bar | .pp-top-bar-search-right |
._rightElement_1d69i_67 |
| Empty space between the search bar and create character button | .profile-top-box-search-input-spacer-bottom |
.css-17xejub:nth-of-type(2) |
| Header Sub-container 2 (houses the create character button, notifications button, and user button) | .pp-top-bar-right |
._right_1lgb1_53 PREVIOUSLY .css-p641ht>.css-wd8hou |
| Header Sub-container 2 inner flex | N/A | ._container_1bfxv_1 |
| Create character button | .pp-top-bar-create-char or .profile-top-bar-create-char |
._createButton_1bfxv_14 or .glow-on-hover |
| Create character button on hover (the purple) | .pp-top-bar-create-char:before or .profile-top-bar-create-char:before |
.glow-on-hover:before |
| Create character button on hover background layer (the grey) | .pp-top-bar-create-char:after or .profile-top-bar-create-char:after |
.glow-on-hover:after |
| Notifications outer button container | N/A | ._notificationsContainer_abfem_2 |
| Notifications button container | [aria-label="Notifications"] |
._notificationsButton_abfem_7 FORMERLY .css-18yip8r |
| Notification bell | [aria-label="Notifications"] svg |
._notificationsButton_abfem_7 svg |
| Unread notification circle | [class*="notificationsBadge_"] |
._notificationsBadge_abfem_41 |
| User icon container | .pp-top-bar-app-menu or .profile-top-bar-app-menu |
.css-rvct59 FORMERLY .css-128hf7l, .css-bu13fv |
| User icon secondary container | N/A | .css-rvct59>.css-xl71ch |
| User icon transition layer | N/A | .css-2jhocq |
| User icon image container | N/A | .css-fsfp0u PREVIOUSLY .css-wac9aa |
| User icon image | N/A | .css-fsfp0u img |
Character/Bot Card Page Portion
| Element | Label | Class ID Selector |
|---|---|---|
| Main container (contains Character tab, number of characters, character search, filter button, latest menu, and bot card grid) | .profile-page-container-flex-box |
.css-1wfbrwg>div:nth-child(2) |
| 'Character' tab main container (the blue 'Characters' profile tab) | .profile-tabs-chakra-tabs |
.css-1bx5ylf or #profile-tabs |
| 'Character' tab button container | .pp-tabs-wrapper or .profile-tabs-wrapper |
.css-i3ef4m |
| 'Character' tab button background & text container | .pp-tabs-button or .profile-tabs-button |
.css-1jj3srb (use .css-1jj3srb[aria-selected=true], .css-1jj3srb[data-selected] to change colour on selection) |
| 'Character' tab button glowing bar | .pp-tabs-indicator or .profile-tabs-indicator |
.css-1y3jyt3 |
| Character page container layer 2 (contains number of characters, character search, filter button, latest menu, and bot card grid) | .pp-tabs-panels or .profile-tabs-panels |
.css-1bx5ylf>div:nth-child(2) |
| Character page container layer 3 | .profile-tab-panel |
.css-1bx5ylf>div:nth-child(2)>div |
| Character page container layer 4 | N/A | .css-2n7zf2 |
| Character page flexbox (contains Character page sub-container 1 , 2, and 3) | .characters-list-container-flex |
.css-2n7zf2>div |
| Character page sub-container 1 (contains number of characters, character search, filter button, latest menu | .character-list-pagination-flex |
.css-2n7zf2>div>div:nth-child(1) or .css-m8ywhg |
| Number of characters main container | .character-list-pagination-box |
.css-6su6fj or .css-m8ywhg>div:nth-child(1) |
| Number of characters flex layer | .profile-pagination-flex-outer |
.css-1pfxi6a |
| Number of characters styling (border) | .pp-pg-total or .profile-badge-flex-outer |
.Btn2-purple |
| Number of characters styling (background) | .pp-pg-total:before |
.Btn2-purple:before |
| Number of character text flex container (contains number and 'characters' text | .profile-badge-flex-inner |
.Btn2-purple>.css-wd8hou |
| Number of characters number | .pp-pg-total-count or .profile-badge-total-count |
.Btn2-purple>.css-wd8hou strong |
| Number of characters text | .pp-pg-total-text or .profile-badge-total-text |
.Btn2-purple>.css-wd8hou p |
| Character search bar, filter button, latest menu main container | N/A | .css-zdpt2t |
| Character search bar, filter button, latest menu container layer 2 | .profile-filters-flex-outer |
.css-1cdqd3a |
| Character search bar, filter button, latest menu flex container (aligns the 3 items) | .profile-filters-flex-inner |
.css-mcoi9a |
| Character search bar main container | .profile-filters-flex-inner-hassearchfilter |
.css-1jy826p |
| Character search bar container layer 2 | .profile-character-search-input-group |
.css-1jy826p>.css-1y0e7gb |
| Character search bar input | .pp-fl-search-input or .profile-character-search-input |
.css-3rot3 |
| Tag filters button main container | .pp-fl-filter-button or .profile-filter-button |
.css-1n2in4t |
| Tag filters icon | .pp-fl-filter-button svg or .profile-filter-button svg |
.css-1n2in4t svg |
| Latest filtering menu main container | .profile-filters-flex-inner-onorderchanged |
.css-1i3ggec |
| Latest filtering menu container layer 2 | .transparent |
.css-b62m3t-container |
| Latest filtering menu button background container | .transparent .react-select__control |
|
| Latest filtering menu selected filter text container | .transparent .react-select__value-container |
|
| Latest filtering menu selected filter text | .transparent .react-select__value-container>div |
|
| Latest filtering menu down arrow outer container | .css-1wy0on6 |
|
| Latest filtering menu line separator (between 'Latest' and the down arrow) | .css-1wy0on6 span |
|
| Latest filtering menu down arrow inner container | .transparent .react-select__dropdown-indicator |
|
| Latest filtering menu down arrow | .css-8mmkcg or .transparent .react-select__dropdown-indicator svg |
|
| Character page sub-container 2 (contains bot card grid) | .pp-cc-list-container |
.css-2n7zf2>div>div:nth-child(2) |
| Character page sub-container 3 (contains page counter / character page footer) | .profile-pagination-flex-outer |
.css-2n7zf2>div>div:nth-child(3) or .css-1pfxi6a SHARED ID WITH NUMBER OF CHARACTERS |
| Page arrows and page number flex container | .profile-pagination-prev-hstack |
.css-1igwmid |
| '<' Page arrow container | .pp-pg-prev-button or .profile-pagination-prev-button |
.css-1gpctw1:nth-of-type(1) |
| '<' Page arrow | .pp-pg-prev-button svg or .profile-pagination-prev-button svg |
.css-1gpctw1:nth-of-type(1) svg |
| Page number container | .profile-pagination-flex-inner |
.css-1bejyq4 |
| Page number | .pp-pg-page-button |
.css-1bejyq4>div |
| Active Page Number | .pp-pg-page-button-active .profile-pagination-page-button-active |
N/A |
| '>' Page arrow container | .pp-pg-next-button or .profile-pagination-next-button-icon |
.css-1gpctw1:nth-of-type(2) |
| '>' Page arrow | .pp-pg-next-button svg or .profile-pagination-next-button-icon svg |
.css-1gpctw1:nth-of-type(2) svg |
Character Filtering Menu (Latest Menu)
| Element | Label | Class ID Selector |
|---|---|---|
| Menu main pop-up container | N/A | .transparent .react-select__menu or .css-1nmdiq5-menu |
| Menu main background layer | .react-select__menu-list |
.css-qr46ko |
| 'Popular' Menu Option | .react-select__option:nth-of-type(1) |
.css-qr46ko>div:nth-child(1) |
| 'Latest' Menu Option | .react-select__option:nth-of-type(2) |
.css-qr46ko>div:nth-child(2) |
| 'Trending' Menu Option | .react-select__option:nth-of-type(3) |
.css-qr46ko>div:nth-child(3) |
| 'Trending 24h' Menu Option | .react-select__option:nth-of-type(4) |
.css-qr46ko>div:nth-child(4) |
| Selected Menu Option | N/A | .transparent .react-select__option--is-selected |
| Hovered Menu Option | N/A | .transparent .react-select__option:hover |
Tag Filter Pop Up Screen
| Element | Label | Class ID Selector |
|---|---|---|
| Main filter pop-up container | N/A | .css-16r55pk |
| Filter pop-up main flex container (contains sections for the 'Filters' header,'Tags' sub-header, show tags button, X button) | N/A | .css-1dljitb FORMERLY .css-14bo29v |
| 'Filters' header container | N/A | .css-dcyl1x or .css-1dljitb header |
| 'X' close button container | N/A | .css-lyo4r5 or .css-1dljitb>button:nth-of-type(1) |
| 'X' close button icon | N/A | .css-lyo4r5 svg or .css-1dljitb>button:nth-of-type(1) svg |
| Tags section container | N/A | .css-1x51k4p or .css-1dljitb>div:nth-child(3) |
| Tags section container layer 2 | .profile-filter-modal-body-flex |
.css-18936vg |
| Tags section container layer 3 (idk what this is here for) | .profile-filter-modal-body-tags-flex-box |
.css-1x51k4p>div>.css-0 |
| 'Tags' header container | .profile-filter-modal-body-tags-flex-box-heading |
.css-1x51k4p h2 or .css-178jenf |
| Tags section container layer 4 (idk what this is here for again) | .profile-filter-modal-body-tags-flex-box>.css-0 |
.css-1x51k4p>div>div>.css-0 |
| Filter tags + buttons main container | N/A | ._container_1lgbq_1 |
| Filter tags main container | N/A | ._tagsContainer_1lgbq_10 |
| Collapsed Filter Tags Flex Container | N/A | ._collapsedContainerWrapper_1lgbq_78 |
| Collapsed Filter Right Gradient | N/A | ._gradientRight_1lgbq_36 |
| Collapsed Filter Left Gradient | N/A | ._gradientLeft_1lgbq_19 |
| Collapsed Filter Right Arrow Button | [class*="navigationButton_"] |
._navigationButtonRight_1lgbq_138 |
| Collapsed Filter Right Arrow Button '>' Icon | [class*="navigationButton_"] svg |
._navigationButtonRight_1lgbq_138 svg |
| Collapsed Filter Left Arrow Button | [class*="navigationButton_"] |
._navigationButtonLeft_1lgbq_129 |
| Collapsed Filter Left Arrow Button '<' Icon | [class*="navigationButton_"] svg |
._navigationButtonLeft_1lgbq_129 svg |
| Expand Filters Button | N/A | ._expandButton_1lgbq_153 |
| Expand Filters Button Icon | N/A | ._expandButton_1lgbq_153 svg |
| Filters Flex Container | N/A | ._collapsedContainer_1lgbq_78 or ._expanded_1lgbq_14 |
| Filter Tag Outer Container | N/A | ._motionDiv_1lgbq_142 |
| Filter tags flex container | N/A | ._container_1fwqk_1 |
| Filter tag styling | N/A | ._tag_1fwqk_6 or ._collapsedContainer_1lgbq_78 button |
User Menu
| Element | Label | Class ID Selector |
|---|---|---|
| Main menu container | N/A | .css-mzi0gq |
| Menu options container | .pp-top-bar-app-menu-list or .profile-top-bar-app-menu-list |
.css-15hrz07FORMERLY .css-uv5nn8 |
| Empty container parent layer (idk why it was added) | N/A | .css-15hrz07>.css-0 |
| All menu options | pp-top-bar-app-menu-list-item or .profile-top-bar-app-menu-list a |
.css-15hrz07 a |
| 'Profile' menu option | .pp-top-bar-app-menu-list-item:nth-of-type(1) |
.css-15hrz07>a:first-child or .css-15hrz07 a:nth-of-type(1) |
| 'Profile' menu icon | .pp-top-bar-app-menu-list-item:nth-of-type(1) svg |
.css-15hrz07>a:first-child svg or .css-15hrz07 a:nth-of-type(1) svg |
| 'Create Character' menu option | .pp-top-bar-app-menu-list-item:nth-of-type(2) |
.css-15hrz07 a:nth-of-type(2) |
| 'Create Character' menu icon | .pp-top-bar-app-menu-list-item:nth-of-type(2) svg |
.css-15hrz07 a:nth-of-type(2) svg |
| 'My Characters' menu option | .pp-top-bar-app-menu-list-item:nth-of-type(3) |
.css-15hrz07 a:nth-of-type(3) |
| 'My Characters' menu icon | .pp-top-bar-app-menu-list-item:nth-of-type(3) svg |
.css-15hrz07 a:nth-of-type(3) svg |
| 'Scripts beta' menu option | .pp-top-bar-app-menu-list-item:nth-of-type(4) |
.css-15hrz07 a:nth-of-type(4) |
| 'Scripts beta' menu icon | .pp-top-bar-app-menu-list-item:nth-of-type(4) svg |
.css-15hrz07 a:nth-of-type(4) svg |
| 'My Chats' menu option | .pp-top-bar-app-menu-list-item:nth-of-type(5) |
.css-15hrz07 a:nth-of-type(5) |
| 'My Chats' menu icon | .pp-top-bar-app-menu-list-item:nth-of-type(5) svg |
.css-15hrz07 a:nth-of-type(5) svg |
| 'My Personas' menu option | .pp-top-bar-app-menu-list-item:nth-of-type(6) |
.css-15hrz07 a:nth-of-type(6) |
| 'My Personas' menu icon | .pp-top-bar-app-menu-list-item:nth-of-type(6) svg |
.css-15hrz07 a:nth-of-type(6) svg |
| 'Following' menu option | .pp-top-bar-app-menu-list-item:nth-of-type(7) |
.css-15hrz07 a:nth-of-type(7) |
| 'Following' menu icon | .pp-top-bar-app-menu-list-item:nth-of-type(7) svg |
.css-15hrz07 a:nth-of-type(7) svg |
| 'Blocks' menu option | .pp-top-bar-app-menu-list-item:nth-of-type(8) |
.css-15hrz07 a:nth-of-type(8) |
| 'Blocks' menu icon | .pp-top-bar-app-menu-list-item:nth-of-type(8) svg |
.css-15hrz07 a:nth-of-type(8) svg |
| 'Media Gallery' menu option | .pp-top-bar-app-menu-list-item:nth-of-type(9) |
.css-15hrz07 a:nth-of-type(9) |
| 'Media Gallery' menu icon | .pp-top-bar-app-menu-list-item:nth-of-type(9) svg |
.css-15hrz07 a:nth-of-type(9) svg |
| 'Settings' menu option | .pp-top-bar-app-menu-list-item:nth-of-type(10) |
.css-15hrz07 a:nth-of-type(10) |
| 'Settings' menu icon | .pp-top-bar-app-menu-list-item:nth-of-type(10) svg |
.css-15hrz07 a:nth-of-type(10) svg |
| 'Log Out' menu option | .pp-top-bar-app-menu-list-item:nth-of-type(11) |
.css-15hrz07 a:last-child or .css-15hrz07 a:nth-of-type(11) |
| 'Log Out' menu icon | .pp-top-bar-app-menu-list-item:nth-of-type(11) svg |
.css-15hrz07 a:last-child svg or .css-15hrz07 a:nth-of-type(11) svg |
| All line spacers between menu options | N/A | .css-15hrz07 hr (if you'd like to target each one individually, then .css-uv5nn8 hr:nth-of-type(n) where n is 1 - 10 of the lines) |
Notifications Menu Pop Up
| Element | Label | Class ID Selector |
|---|---|---|
| Main parent container | [class*="notificationsPopover_"] |
._notificationsPopover_abfem_72 |
| 'Notifications' title container | [class*="popoverHeader_"] |
._popoverHeader_abfem_100 |
| 'Notifications' title text | [class*="popoverTitle_"] |
._popoverTitle_abfem_109 |
| Buttons (Trash, Read All, Close) Flex Container | [class*="headerActions_"] |
._headerActions_abfem_117 |
| Delete All Container | [class*="deleteAllButton_"] |
._deleteAllButton_abfem_496 |
| Delete All Trash icon | [class*="deleteAllButton_"] svg |
._deleteAllButton_abfem_496 svg |
| Read All Container | [class*="markAllReadButton_"] |
._markAllReadButton_abfem_123 |
| Read All Checkmarks icon | [class*="markAllReadButton_"] svg |
._markAllReadButton_abfem_123 svg |
| Close Menu Container | [class*="closeButton_"] |
._closeButton_abfem_124 |
| Close Menu 'X' icon | [class*="closeButton_"] svg |
._closeButton_abfem_124 svg |
| List of Notifs container | [class*="notificationsList_"] |
._notificationsList_abfem_151 |
| Notification container | [class*="notificationItem_"] |
._notificationItem_k9ox5_2 |
| Notif image outer container | N/A | ._avatarSection_k9ox5_33 |
| Notif image inner container | N/A | a._avatarContainer_k9ox5_42 or ._avatarContainer_k9ox5_42 |
| Notif bot image | [class*="notificationItem_"] img:nth-of-type(1) |
._characterAvatar_k9ox5_58 |
| Notif user image | [class*="notificationItem_"] img:nth-of-type(2) |
._userAvatar_k9ox5_65 |
| Text parent container | [class*="contentWrapper_"] |
._contentWrapper_k9ox5_85 |
| Text flex container | [class*="contentWrapper_"]>div |
._content_k9ox5_85 |
| Notif subject line (first line of text) | N/A | ._subject_k9ox5_116 |
| Notif content text (second line of text) | N/A | ._body_k9ox5_132 |
| Notif time stamp (third line of text) | N/A | ._timestamp_k9ox5_145 |
| Delete/Archive Notification button container | [class*="archiveSection_"] |
._archiveSection_k9ox5_153 |
| Delete/Archive Notification button | [aria-label="Archive notification"] |
._archiveButton_k9ox5_170 |
| Trash can icon | [aria-label="Archive notification"] svg |
._archiveButton_k9ox5_170 svg |
| Unread Notification Text Parent Container | N/A | ._contentWrapperUnread_k9ox5_102 |
| Unread Notification subject line text | [class*="subjectUnread_"] |
._subjectUnread_k9ox5_125 |
| Unread notification indicator bar | [class*="unreadIndicator_"] |
._unreadIndicator_k9ox5_23 |
| 'Load More' Button | [class*="loadMoreButton_"] |
._loadMoreButton_abfem_382 |
Mobile/Small Viewport-Only Elements
little note, some of these selectors are long because the IDs are shared between the desktop header and mobile header. the following selectors I have tried to make mobile-specific. Otherwise another way to target the shared IDs is through a media query for small screens:
Mobile Header
| Element | Label | Class ID Selector |
|---|---|---|
| Header parent container | .pp-top-header |
.css-1n2ma9q |
| Main container | .pp-top-bar or .profile-top-bar Note: these labels are shared with desktop |
.css-1hv2wai PREVIOUSLY .css-18eafy0 and .css-bqd4p6 |
| 'Back' button section container | N/A | .css-13qw20c |
| 'Back' button container | .pp-top-bar-back-button or .profile-top-bar-back-button |
.css-1v7jfo7 or .css-13qw20c>button |
| '<' icon | .pp-top-bar-back-button svg |
.css-1dwr89y or .css-13qw20c>button span or .css-13qw20c>button svg |
| 'Back' text | .pp-top-bar-back-button p |
.css-1rokoft or .css-13qw20c>button p |
| 'janitorai' section container | N/A | .css-1nsonir |
| 'janitorai' section inner container (this hides text overflow) | N/A | .css-1o4wo1x or .css-1nsonir>div |
| 'janitorai' text | .pp-top-bar-title or .profile-top-bar-title |
.css-16g2f4q or .css-1nsonir p |
| Announcement/Notification button section container | N/A | .css-7f563p |
Mobile Footer Menu
| Element | Label | Class ID Selector |
|---|---|---|
| Main footer container | .pp-mnb-wrapper |
.css-1qf4tpw |
| Links/Icon container | .pp-mnb-container |
.css-1cyxci9 FORMERLY .css-avv0po |
| All links (excluding user menu) | .pp-mnb-container a |
.css-1cyxci9 a |
| All link containers (excluding user menu) | .pp-mnb-item |
.css-1l8kxqv |
| All icons (excluding user menu) | .pp-mnb-container svg |
.css-1cyxci9 svg |
| Home menu link | .pp-mnb-container a:nth-of-type(1) |
.css-1cyxci9>a:nth-child(1) |
| Home menu icon (house icon) | .pp-mnb-item:nth-of-type(1) svg |
.css-1cyxci9>a:nth-child(1) svg |
| Chats menu link | .pp-mnb-container a:nth-of-type(2) |
.css-1cyxci9>a:nth-child(2) |
| Chats menu icon (chat bubble icon) | .pp-mnb-item:nth-of-type(2) svg |
.css-1cyxci9>a:nth-child(2) svg |
| Search/Explore menu link | .pp-mnb-container a:nth-of-type(3) |
.css-1cyxci9>a:nth-child(3) |
| Search/explore menu icon (magnifying glass) | .pp-mnb-item:nth-of-type(3) svg |
.css-1cyxci9o>a:nth-child(3) svg |
| User menu link container | .pp-mnb-container>div:last-child |
.css-1cyxci9>div:last-child or .css-dvxtzn |
| User menu link flex container | .pp-mnb-user-menu |
.css-1ib4t17 |
| User menu link transformation layer | .pp-top-bar-app-menu |
.css-8mfon9 PREVIOUSLY .css-1u2nttd, .css-nhknnx |
| User menu link inner container layer 1 | .pp-top-bar-app-menu>span |
.css-xl71ch |
| User menu link inner container layer 2 (contains transition) | N/A | .css-2jhocq |
| User menu avatar image container | .pp-top-bar-app-menu span:nth-of-type(2) |
.css-1fgzixv PREVIOUSLY .css-1vc3px3 |
| User menu avatar image | .pp-mnb-container img |
.css-mnkk9b |
Miscellaneous Elements
Tooltips (Pop-up Text Boxes)
If you're looking to inspect a specific tooltip through devtools, you can either press F8 to freeze your screen when you have the tooltip on screen to inspect it or, in the devtools console, type:
Then hover over the element you want the tooltip of until the debugger pauses your screen with the tooltip up. Then, in the devtools console, type:
Which will allow you to select and inspect the ID of the tooltip on screen.
some of these are outdated due to the Toast update. Will update these eventually.
| Element | Label | Class ID Selector |
|---|---|---|
| All tooltip text boxes | N/A | .css-jdhqy4>div |
| Tooltip arrow outer container | .chakra-tooltip__arrow-wrapper |
.css-jdhqy4 .css-0 |
| Tooltip arrow inner container | .chakra-tooltip__arrow |
.css-1ugx2pr needs !important to make changes |
| Followed/Unfollowed green creator pop up (toast) container | [data-sonner-toaster] |
.sonner-toast-container |
| Followed/Unfollowed green creator pop up | .sonner-toast-container [data-sonner-toast][data-type=success] |
.sonner-toast-container li |
| Followed/Unfollowed green checkmark icon | .sonner-toast-container [data-sonner-toast][data-type=success] [data-icon] |
.sonner-toast-container li>div:first-child |
| Followed/Unfollowed green text container | [data-sonner-toast][data-styled=true] [data-content] |
.sonner-toast-container li>div:last-child |
| Followed/Unfollowed green text | [data-sonner-toast][data-styled=true] [data-title] |
.sonner-toast-container li>div:last-child>div |
| Follow/Unfollow tooltip text | .profile-uc-follow-tooltip |
.css-1mdyyu3 |
| 'Block this creator' tooltip parent container | N/A | .css-r6z5ec |
| 'Block this creator' tooltip inner container | #menu-list-public-profile-block-menu |
.css-1f9crt2 |
| 'Block this creator' tooltip flex container | .pp-uc-options-menu-item |
.css-1izfp9f |
| 'Block this creator' X close button | .pp-uc-options-menu-item span:first-child |
.css-7halv9 |
| 'Block this creator' X close button icon | .pp-uc-options-menu-item span:first-child svg |
.css-7halv9 svg |
| 'Block this creator' text | .pp-uc-options-menu-item span:last-child |
.css-1izfp9f span:last-child |
WIP: unblock popup, unblock button, unblock confirmation, tooltips (more of them...)
Element Changes
Updated: 08/10/25
Previous IDs are listed in order of update from left to right.
| CURRENT ID | PREVIOUS IDs |
|---|---|
.css-14plm5m |
.css-x2gqu0 |
._mentions--singleLine_sl551_1 |
._mentions--singleLine_gae3o_1 |
._mentions__control_sl551_1 |
._mentions__input_gae3o_11 |
._searchInput_1tkkb_1 |
._searchInput_c7epr_1 |
.css-126p26a |
.css-55tioa |
.css-1bmggo3 |
.css-e8xvxi |
._wrapper_13xo6_1 |
._wrapper_1lcdj_1 |
.css-tyeyao |
.css-1cjenuj , .css-anekkm |
.css-151faa7 |
.css-1sybr60, .css-p641ht |
.css-1dljitb |
.css-14bo29v, .css-o1zwct, .css-irb94a |
.css-m9a976 |
.css-1cxauvg, .css-2zp1xp |
.css-15hrz07 |
.css-uv5nn8, .css-19h42zx |
.css-13wmn96 |
.css-1sxhvxh |
.css-1n7vfh0 |
.css-hjkukh |
Element Label Updates
Provided: 08/12/25
Disabled CSS/HTML Properties on JAI
Here is a list of properties/commands that I have tried and confirmed to be disabled currently:
- <input type="button">
- <input type="checkbox">
- <input type="color">
- <input type="date">
- <input type="datetime-local">
- <input type="email">
- <input type="file">
- <input type="hidden">
- <input type="image">
- <input type="month">
- <input type="number">
- <input type="password">
- <input type="radio">
- <input type="range">
- <input type="reset">
- <input type="search">
- <input type="submit">
- <input type="tel">
- <input type="text">
- <input type="time">
- <input type="url">
- <input type="week">
- <svg>
- <button>
- <label>
- <video src>
- <audio>
- <path>
- <script>
- <textpath>
- URL()
- scrollbar-width
- scrollbar-color
- scrollbar-gutter
- overflow-clip-margin
- scroll-behaviour
- scroll-margin
- scroll-padding
- scroll-snap-align
- scroll-snap-stop
- scroll-snap-type
- details name attribute
- @container
- mask-composite
- variables
- attr(data-text)
- CSS nesting
- ARIA attributes
- place-items
- @property
- <label>
- column-gap
- row-gap
- -inline-start/end
- -block-start/end
- offset-path
- offset-distance
- offset-rotate
- offset-anchor
Yup that's it for now. Thanks for being here!