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: 10/21/2025
N/A = Not Applicable (no equivalent for this field)
To do:
- Adding picture references
- updating the header stuff and other things as the site changes guh
- Misc things (tooltips, edit button, etc.)
What's Here:
Default Bot Card Elements
| Element | Class ID Selector | Label |
|---|---|---|
| Default Bot Card Layer 1 (overall container) | .css-13wmn96 PREVIOUSLY: .css-1sxhvxh |
.pp-cc-wrapper or .profile-character-card-wrapper |
| Background Layer 1 | .css-1sxhvxh>.css-0 |
.pp-cc-gradient-1 |
| Background Layer 2 | .css-dltla |
.pp-cc-gradient-2 |
| Background Layer 3 | .css-1jf56se |
.pp-cc-gradient-3 |
| Main Bot Card Info Container | .css-1s5evre |
.profile-character-card-stack |
| Bot Link (contains name, chat ribbon, bot image) | .css-1s5evre a:nth-child(1) |
.profile-character-card-stack-link-component |
| Bot name container | .css-nlxhw4 |
.profile-character-card-stack-link-component-box |
| Bot name text | .css-nlxhw4>div |
.pp-cc-name or .profile-character-card-name-box |
| Chat ribbon main container | .css-10cv7r2 |
.profile-character-card-stats-box |
| Chat ribbon first span (I don't know what this is here for) | .css-10cv7r2>.css-1baulvz |
N/A |
| Chat ribbon outer container (applies the dropshadow and some positioning) | ._ribbon_1chl9_1 or .css-1ket5wn |
.pp-cc-ribbon or .profile-character-card-ribbon |
| Chat ribbon shape (gives the ribbon shape with background, box-shadow, clip-path) | ._content_1chl9_11 or .css-wexxj8 |
.pp-cc-ribbon-wrap or .profile-character-card-ribbon-wrap |
| Chat ribbon text container (contains chat count and icon) | .css-euh5x6 |
.pp-cc-chats or .profile-character-card-chats-hstack |
| Chat ribbon icon | .css-euh5x6 svg |
.pp-cc-chats svg |
| Chat ribbon number | .css-euh5x6 span |
.pp-cc-chats-count or .profile-character-card-chats-count |
| Bot image container | .css-1q7rmf0 |
.profile-character-card-avatar-aspect-ratio |
| Bot image | .css-1q7rmf0 img |
.pp-cc-avatar or .profile-character-card-avatar-image |
| Username on botcard | .css-1s5evre a:nth-child(2) |
.profile-character-card-creator-name-link |
| Username on botcard text | .css-1s5evre a:nth-child(2) span |
.pp-cc-creator-name or .profile-character-card-creator-name-box |
| Description container | .css-199gcrh |
.profile-character-card-description-box |
| Description paragraph container | .css-96l1id |
.pp-cc-description or .profile-character-card-description-markdown-container |
| Description paragraph text | .css-96l1id p or .css-199gcrh p |
.pp-cc-description p or .profile-character-card-description-markdown-container p |
| Star line separator | .css-1s5evre>div:nth-child(4) or .css-1lgnt2x |
.pp-cc-star-line or .profile-character-card-star-line |
| Star image | .css-1s5evre>div:nth-child(4) img or .css-1lgnt2x img |
.pp-cc-star or .profile-character-card-star |
| Tags container | .css-4ofde4 |
.pp-cc-tags or .profile-character-card-tags |
| Tags list container | .css-k1urot |
N/A |
| Limitless tag container | .css-123m5uu |
.pp-cc-tags-wrap or .profile-character-card-tags-wrap |
| Limitless tag styling | .css-123m5uu span |
.pp-tag-limitless or .profile-character-card-tag-limitless |
| All other tags (excluding custom tags) | .css-k1urot>.css-1yp4ln |
.pp-cc-tags-wrap-regular or .profile-character-card-tags-wrap or .profile-character-card-tags-wrap-regular |
| Tag styling | .css-k1urot span |
.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 |
| Custom tag styling | .pp-cc-tags-wrap-custom span FORMERLY ..customenabled |
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 |
| Token count container | .css-1c9wmts |
.profile-character-card-box |
| Token count text | .css-1c9wmts p |
.pp-cc-tokens-count or .profile-character-card-tokens-count |
Event-Specific Bot Card Elements
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 |
Profile Page Elements
Main/General Page Elements
| Element | Class ID Selector | Label |
|---|---|---|
| Body | body |
N/A |
| Root | root |
N/A |
| Page flex container | ._wrapper_13xo6_1 |
N/A |
| Header container | ._header_1lgb1_1 or header PREVIOUSLY: .css-tyeyao |
.profile-top-bar-flex-outer or .pp-top-bar-outer |
| Profile main parent container (has side padding) | ._main_qqqm3_1 or main |
._customPadding_qqqm3_15 |
| Profile wrapper container (has top padding) | .css-14l6kwv |
.profile-page-container |
| Profile background (has image background if set) | UNIQUE | .pp-page-background or .profile-page-background |
| Profile/Botcard flex parent container | .css-1wfbrwg |
.profile-page-flex |
| Footer container | ._footer_b4zg4_1 or footer |
N/A |
Profile Box
| Element | Class ID Selector | Label |
|---|---|---|
| Profile box layer 1 (main container) | .css-1wfbrwg>div:nth-child(1) or .css-vqimyu |
.pp-uc-background or .profile-uc-background-flex |
| Background layer 1 | .css-1wfbrwg>div:nth-child(1)>.css-0 |
.profile-background-box-1 |
| Background layer 2 | .css-1wfbrwg>div:nth-child(1)>div:nth-child(2) |
.profile-background-box-2 |
| Background layer 3 | .css-1wfbrwg>div:nth-child(1)>div:nth-child(3) |
.profile-background-box-3 |
| Profile box inner container | .css-1wfbrwg>div:nth-child(1)>div:nth-child(4) |
.profile-info-wrapper-box |
| Profile box inner stack (contains the ordering of user info, bio, and follow/options buttons) | .css-1wfbrwg>div:nth-child(1)>div>.css-8g8ihq |
.profile-info-stack |
| User info main container (contains profile image, username, followers, badges, date joined) | .css-1uodvt1 |
.profile-info-hstack |
| Profile image container | .css-79elbk |
.pp-uc-avatar-container or .profile-avatar-container |
| Profile image | .css-18bnokj or .css-79elbk img |
.pp-uc-avatar or .profile-avatar |
| User info container (contains username, followers, badges, date joined, NOT PFP) | .css-1uodvt1>.css-8g8ihq |
.profile-info-stack-inner |
| Username container | .css-70qvj9 or .css-1uodvt1>.css-8g8ihq>div:nth-child(1) |
.profile-info-stack-inner-flex |
| Username | .css-70qvj9 h2 or .css-o5an2m or .css-1uodvt1>.css-8g8ihq>div:nth-child(1) h2 |
.pp-uc-title or .profile-title-heading |
| Verification badge container | .css-umxegz |
N/A |
| Verfication badge | .css-umxegz span or .css-70qvj9 .css-fo6ddv |
N/A |
| Moderator badge container | .css-8amxhq |
N/A |
| Moderator badge | .css-8amxhq img |
N/A |
| Number of followers container | .css-1uodvt1>.css-8g8ihq>div:nth-child(2) |
.pp-uc-followers-count or .profile-followers-count |
| Followers Number | .css-1uodvt1>.css-8g8ihq>div:nth-child(2) span:nth-of-type(1) |
.pp-uc-followers-count span:nth-of-type(1) |
| Followers text | .css-1uodvt1>.css-8g8ihq>div:nth-child(2) span:nth-of-type(2) |
.pp-uc-followers-count span:nth-of-type(2) |
| Event badge container | .css-hjkukh or .css-1uodvt1>.css-8g8ihq>div:nth-child(3) |
N/A |
| Event badges (non-specific) | .css-hjkukh>div or .css-x3wokz or .css-hjkukh img |
N/A |
| Member Since/Date joined | .css-1uodvt1>.css-8g8ihq>div:nth-child(4) |
.pp-uc-member-since or .profile-member-since-box |
| Profile Bio main container | .css-1bn1yyx |
.pp-uc-about-me or .profile-about-me |
| Follow/Options button main container | div:has(>.css-y9k5u7) |
N/A |
| Follow/Options flex container | .css-y9k5u7 |
N/A |
| Follow button main container | .css-y9k5u7>div:nth-child(1) or .css-1vakbk4 |
.profile-uc-follow-flex |
| Follow button outer styling (border) | .Btn |
.pp-uc-follow-button or .profile-uc-follow-button |
| Follow button inner styling (background) | .Btn:before |
.pp-uc-follow-button:before or .profile-uc-follow-button:before |
| Follow button text | .Btn span |
.profile-uc-follow-text |
| Options button main container | .css-15w88gn |
.pp-uc-options-menu or .chakra-menu__menu-button |
| Options button text | .css-15w88gn>span:nth-child(1) or .css-xl71ch |
N/A |
| Options button 3 dots container | .css-15w88gn>span:nth-child(2) or .css-1hzyiq5 |
N/A |
| Options button 3 dots | .css-1hzyiq5 svg or .css-15w88gn svg |
.pp-uc-options-menu svg |
Desktop Header
| Element | Class ID Selector | Label |
|---|---|---|
| Header Flex container | ._wrapper_13xo6_1 FORMERLY ._wrapper_1lcdj_1 |
N/A |
| Header parent container | ._header_1lgb1_1 FORMERLY .css-tyeyao |
profile-top-bar-flex-outer |
| Header inner flex container (contains header sub-containers 1 and 2) | ._bar_1lgb1_26 FORMERLY: .css-151faa7 |
.pp-top-bar or .profile-top-bar or .pp-top-bar-inner |
| Header Sub-container 1 (houses the JAI beta logo and search bar) | ._left_1lgb1_45 PREVIOUSLY .css-17xq282 |
.profile-top-box-flex-inner or .pp-top-bar-left |
| JAI logo main flex container | ._logoContainer_1lgb1_7 |
.profile-top-bar-logo-box (label is shared with link container below) |
| JAI logo main link container | .css-99y9bx PREVIOUSLY .css-17xq282 a or .css-8uj2do |
.profile-top-bar-logo-box |
| JAI logo container (has the background, box-shadow, text-shadow, and backdrop-filter) | .glow-logo or .css-1bmggo3 FORMERLY: .css-e8xvxi |
.pp-top-bar-logo or .profile-top-bar-logo |
| "Janitor" text portion | .glow-logo h2 |
.pp-top-bar-logo-name or .profile-top-bar-logo-name |
| "Beta" text portion | .glow-logo p |
.pp-top-bar-logo-sub-name or .profile-top-bar-logo-sub-name |
| Empty space between the JAI logo and search bar (yes it's an element, not sure why) | .css-17xejub:nth-of-type(1) |
.profile-top-box-search-input-spacer-top |
| Search bar main flex container | ._searchInputContainer_1lgb1_19 |
.profile-top-bar-search-wrapper |
| Search bar main container | ._container_fgb7n_1 PREVIOUSLY .css-bar9lc |
.profile-top-bar-search-box or .pp-top-bar-search-box |
| Search bar form | _form_1d69i_129 |
.pp-top-bar-search-form |
| Search bar secondary container | ._inputGroup_1d69i_1 FORMERLY .css-1y0e7gb |
.profile-top-bar-search-input-group or .pp-top-bar-search-input-group |
| Magnifying glass container | ._leftElement_1d69i_8 |
.pp-top-bar-search-icon |
| Magnifying glass subcontainer | ._searchIcon_1d69i_21 |
N/A |
| Magnifying glass icon | ._searchIcon_1d69i_21 svg |
.pp-top-bar-search-icon svg |
| Search bar background | ._inputContainer_1d69i_26 |
.pp-top-bar-search or .profile-top-bar-search or .search-input or .pp-top-bar-search-input |
| Search bar placeholder text | #search-input |
#search-input |
| Search History Parent Container | ._dropdown_1d69i_108 |
.pp-top-bar-search-history |
| Individual History Item container | ._historyItem_dg9q2_1 |
.pp-top-bar-search-history>div or [class*="historyItem_"] |
| History Item Outer Text Container | ._contentSection_dg9q2_53 |
[class*="contentSection_"] |
| Clock Icon Container | ._iconWrapper_dg9q2_61 |
[class*="iconWrapper_"] |
| Clock Icon SVG | ._iconWrapper_dg9q2_61 svg |
[class*="iconWrapper_"] svg |
| History Item Separator | ._historyItem_dg9q2_1:after |
N/A |
| History Item Text | ._queryText_dg9q2_67 |
[class*="queryText_"] |
| Remove From History Button | ._removeButton_dg9q2_79 |
[class*="removeButton_"] |
| Remove From History X SVG | ._removeButton_dg9q2_79 svg |
[class*="removeButton_"] svg |
| Small space at end of search bar | ._rightElement_1d69i_67 |
.pp-top-bar-search-right |
| Empty space between the search bar and create character button | .css-17xejub:nth-of-type(2) |
.profile-top-box-search-input-spacer-bottom |
| Header Sub-container 2 (houses the create character button, notifications button, and user button) | ._right_1lgb1_53 PREVIOUSLY .css-p641ht>.css-wd8hou |
.pp-top-bar-right |
| Header Sub-container 2 inner flex | ._container_1bfxv_1 |
N/A |
| Create character button | ._createButton_1bfxv_14 or .glow-on-hover |
.pp-top-bar-create-char or .profile-top-bar-create-char |
| Create character button on hover (the purple) | .glow-on-hover:before |
.pp-top-bar-create-char:before or .profile-top-bar-create-char:before |
| Create character button on hover background layer (the grey) | .glow-on-hover:after |
.pp-top-bar-create-char:after or .profile-top-bar-create-char:after |
| Notifications outer button container | ._notificationsContainer_abfem_2 |
N/A |
| Notifications button container | ._notificationsButton_abfem_7 FORMERLY .css-18yip8r |
[aria-label="Notifications"] |
| Notification bell | ._notificationsButton_abfem_7 svg |
[aria-label="Notifications"] svg |
| Unread notification circle | ._notificationsBadge_abfem_41 |
[class*="notificationsBadge_"] |
| User icon container | .css-rvct59 FORMERLY .css-128hf7l, .css-bu13fv |
.pp-top-bar-app-menu or .profile-top-bar-app-menu |
| User icon secondary container | .css-rvct59>.css-xl71ch |
N/A |
| User icon transition layer | .css-2jhocq |
N/A |
| User icon image container | .css-fsfp0u PREVIOUSLY .css-wac9aa |
N/A |
| User icon image | .css-fsfp0u img |
N/A |
Character/Bot Card Page Portion
| Element | Class ID Selector | Label |
|---|---|---|
| Main container (contains Character tab, number of characters, character search, filter button, latest menu, and bot card grid) | .css-1wfbrwg>div:nth-child(2) |
.profile-page-container-flex-box |
| 'Character' tab main container (the blue 'Characters' profile tab) | .css-1bx5ylf or #profile-tabs |
.profile-tabs-chakra-tabs |
| 'Character' tab button container | .css-i3ef4m |
.pp-tabs-wrapper or .profile-tabs-wrapper |
| 'Character' tab button background & text container | .css-1jj3srb (use .css-1jj3srb[aria-selected=true], .css-1jj3srb[data-selected] to change colour on selection) |
.pp-tabs-button or .profile-tabs-button |
| 'Character' tab button glowing bar | .css-1y3jyt3 |
.pp-tabs-indicator or .profile-tabs-indicator |
| Character page container layer 2 (contains number of characters, character search, filter button, latest menu, and bot card grid) | .css-1bx5ylf>div:nth-child(2) |
.pp-tabs-panels or .profile-tabs-panels |
| Character page container layer 3 | .css-1bx5ylf>div:nth-child(2)>div |
.profile-tab-panel |
| Character page container layer 4 | .css-2n7zf2 |
N/A |
| Character page flexbox (contains Character page sub-container 1 , 2, and 3) | .css-2n7zf2>div |
.characters-list-container-flex |
| Character page sub-container 1 (contains number of characters, character search, filter button, latest menu | .css-2n7zf2>div>div:nth-child(1) or .css-m8ywhg |
.character-list-pagination-flex |
| Number of characters main container | .css-6su6fj or .css-m8ywhg>div:nth-child(1) |
.character-list-pagination-box |
| Number of characters flex layer | .css-1pfxi6a |
.profile-pagination-flex-outer |
| Number of characters styling (border) | .Btn2-purple |
.pp-pg-total or .profile-badge-flex-outer |
| Number of characters styling (background) | .Btn2-purple:before |
.pp-pg-total:before |
| Number of character text flex container (contains number and 'characters' text | .Btn2-purple>.css-wd8hou |
.profile-badge-flex-inner |
| Number of characters number | .Btn2-purple>.css-wd8hou strong |
.pp-pg-total-count or .profile-badge-total-count |
| Number of characters text | .Btn2-purple>.css-wd8hou p |
.pp-pg-total-text or .profile-badge-total-text |
| Character search bar, filter button, latest menu main container | .css-zdpt2t |
N/A |
| Character search bar, filter button, latest menu container layer 2 | .css-1cdqd3a |
.profile-filters-flex-outer |
| Character search bar, filter button, latest menu flex container (aligns the 3 items) | .css-mcoi9a |
.profile-filters-flex-inner |
| Character search bar main container | .css-1jy826p |
.profile-filters-flex-inner-hassearchfilter |
| Character search bar container layer 2 | .css-1jy826p>.css-1y0e7gb |
.profile-character-search-input-group |
| Character search bar input | .css-3rot3 |
.pp-fl-search-input or .profile-character-search-input |
| Tag filters button main container | .css-1n2in4t |
.pp-fl-filter-button or .profile-filter-button |
| Tag filters icon | .css-1n2in4t svg |
.pp-fl-filter-button svg or .profile-filter-button svg |
| Latest filtering menu main container | .css-1i3ggec |
.profile-filters-flex-inner-onorderchanged |
| Latest filtering menu container layer 2 | .css-b62m3t-container |
.transparent |
| 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) | .css-2n7zf2>div>div:nth-child(2) |
.pp-cc-list-container |
| Character page sub-container 3 (contains page counter / character page footer) | .css-2n7zf2>div>div:nth-child(3) or .css-1pfxi6a SHARED ID WITH NUMBER OF CHARACTERS |
.profile-pagination-flex-outer |
| Page arrows and page number flex container | .css-1igwmid |
.profile-pagination-prev-hstack |
| '<' Page arrow container | .css-1gpctw1:nth-of-type(1) |
.pp-pg-prev-button or .profile-pagination-prev-button |
| '<' Page arrow | .css-1gpctw1:nth-of-type(1) svg |
.pp-pg-prev-button svg or .profile-pagination-prev-button svg |
| Page number container | .css-1bejyq4 |
.profile-pagination-flex-inner |
| Page number | .css-1bejyq4>div |
.pp-pg-page-button |
| Active Page Number | N/A | .pp-pg-page-button-active .profile-pagination-page-button-active |
| '>' Page arrow container | .css-1gpctw1:nth-of-type(2) |
.pp-pg-next-button or .profile-pagination-next-button-icon |
| '>' Page arrow | .css-1gpctw1:nth-of-type(2) svg |
.pp-pg-next-button svg or .profile-pagination-next-button-icon svg |
Character Filtering Menu (Latest Menu)
| Element | Class ID Selector | Label |
|---|---|---|
| Menu main pop-up container | .transparent .react-select__menu or .css-1nmdiq5-menu |
N/A |
| Menu main background layer | .css-qr46ko |
.react-select__menu-list |
| 'Popular' Menu Option | .css-qr46ko>div:nth-child(1) |
.react-select__option:nth-of-type(1) |
| 'Latest' Menu Option | .css-qr46ko>div:nth-child(2) |
.react-select__option:nth-of-type(2) |
| 'Trending' Menu Option | .css-qr46ko>div:nth-child(3) |
.react-select__option:nth-of-type(3) |
| 'Trending 24h' Menu Option | .css-qr46ko>div:nth-child(4) |
.react-select__option:nth-of-type(4) |
| Selected Menu Option | .transparent .react-select__option--is-selected |
N/A |
| Hovered Menu Option | .transparent .react-select__option:hover |
N/A |
Tag Filter Pop Up Screen
| Element | Class ID Selector | Label |
|---|---|---|
| Main filter pop-up container | .css-16r55pk |
N/A |
| Filter pop-up main flex container (contains sections for the 'Filters' header,'Tags' sub-header, show tags button, X button) | .css-1dljitb FORMERLY .css-14bo29v |
N/A |
| 'Filters' header container | .css-dcyl1x or .css-1dljitb header |
N/A |
| 'X' close button container | .css-lyo4r5 or .css-1dljitb>button:nth-of-type(1) |
N/A |
| 'X' close button icon | .css-lyo4r5 svg or .css-1dljitb>button:nth-of-type(1) svg |
N/A |
| Tags section container | .css-1x51k4p or .css-1dljitb>div:nth-child(3) |
N/A |
| Tags section container layer 2 | .css-18936vg |
.profile-filter-modal-body-flex |
| Tags section container layer 3 (idk what this is here for) | .css-1x51k4p>div>.css-0 |
.profile-filter-modal-body-tags-flex-box |
| 'Tags' header container | .css-1x51k4p h2 or .css-178jenf |
.profile-filter-modal-body-tags-flex-box-heading |
| Tags section container layer 4 (idk what this is here for again) | .css-1x51k4p>div>div>.css-0 |
.profile-filter-modal-body-tags-flex-box>.css-0 |
| Filter tags + buttons main container | ._container_1lgbq_1 |
N/A |
| Filter tags main container | ._tagsContainer_1lgbq_10 |
N/A |
| Collapsed Filter Tags Flex Container | ._collapsedContainerWrapper_1lgbq_78 |
N/A |
| Collapsed Filter Right Gradient | ._gradientRight_1lgbq_36 |
N/A |
| Collapsed Filter Left Gradient | ._gradientLeft_1lgbq_19 |
N/A |
| Collapsed Filter Right Arrow Button | ._navigationButtonRight_1lgbq_138 |
[class*="navigationButton_"] |
| Collapsed Filter Right Arrow Button '>' Icon | ._navigationButtonRight_1lgbq_138 svg |
[class*="navigationButton_"] svg |
| Collapsed Filter Left Arrow Button | ._navigationButtonLeft_1lgbq_129 |
[class*="navigationButton_"] |
| Collapsed Filter Left Arrow Button '<' Icon | ._navigationButtonLeft_1lgbq_129 svg |
[class*="navigationButton_"] svg |
| Expand Filters Button | ._expandButton_1lgbq_153 |
N/A |
| Expand Filters Button Icon | ._expandButton_1lgbq_153 svg |
N/A |
| Filters Flex Container | ._collapsedContainer_1lgbq_78 or ._expanded_1lgbq_14 |
N/A |
| Filter Tag Outer Container | ._motionDiv_1lgbq_142 |
N/A |
| Filter tags flex container | ._container_1fwqk_1 |
N/A |
| Filter tag styling | ._tag_1fwqk_6 or ._collapsedContainer_1lgbq_78 button |
N/A |
User Menu
| Element | Class ID Selector | Label |
|---|---|---|
| Main menu container | .css-mzi0gq |
N/A |
| Menu options container | .css-15hrz07FORMERLY .css-uv5nn8 |
.pp-top-bar-app-menu-list or .profile-top-bar-app-menu-list |
| Empty container parent layer (idk why it was added) | .css-15hrz07>.css-0 |
N/A |
| All menu options | .css-15hrz07 a |
pp-top-bar-app-menu-list-item or .profile-top-bar-app-menu-list a |
| 'Profile' menu option | .css-15hrz07>a:first-child or .css-15hrz07 a:nth-of-type(1) |
.pp-top-bar-app-menu-list-item:nth-of-type(1) |
| 'Profile' menu icon | .css-15hrz07>a:first-child svg or .css-15hrz07 a:nth-of-type(1) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(1) svg |
| 'Create Character' menu option | .css-15hrz07 a:nth-of-type(2) |
.pp-top-bar-app-menu-list-item:nth-of-type(2) |
| 'Create Character' menu icon | .css-15hrz07 a:nth-of-type(2) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(2) svg |
| 'My Characters' menu option | .css-15hrz07 a:nth-of-type(3) |
.pp-top-bar-app-menu-list-item:nth-of-type(3) |
| 'My Characters' menu icon | .css-15hrz07 a:nth-of-type(3) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(3) svg |
| 'Scripts beta' menu option | .css-15hrz07 a:nth-of-type(4) |
.pp-top-bar-app-menu-list-item:nth-of-type(4) |
| 'Scripts beta' menu icon | .css-15hrz07 a:nth-of-type(4) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(4) svg |
| 'My Chats' menu option | .css-15hrz07 a:nth-of-type(5) |
.pp-top-bar-app-menu-list-item:nth-of-type(5) |
| 'My Chats' menu icon | .css-15hrz07 a:nth-of-type(5) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(5) svg |
| 'My Personas' menu option | .css-15hrz07 a:nth-of-type(6) |
.pp-top-bar-app-menu-list-item:nth-of-type(6) |
| 'My Personas' menu icon | .css-15hrz07 a:nth-of-type(6) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(6) svg |
| 'Following' menu option | .css-15hrz07 a:nth-of-type(7) |
.pp-top-bar-app-menu-list-item:nth-of-type(7) |
| 'Following' menu icon | .css-15hrz07 a:nth-of-type(7) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(7) svg |
| 'Blocks' menu option | .css-15hrz07 a:nth-of-type(8) |
.pp-top-bar-app-menu-list-item:nth-of-type(8) |
| 'Blocks' menu icon | .css-15hrz07 a:nth-of-type(8) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(8) svg |
| 'Media Gallery' menu option | .css-15hrz07 a:nth-of-type(9) |
.pp-top-bar-app-menu-list-item:nth-of-type(9) |
| 'Media Gallery' menu icon | .css-15hrz07 a:nth-of-type(9) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(9) svg |
| 'Settings' menu option | .css-15hrz07 a:nth-of-type(10) |
.pp-top-bar-app-menu-list-item:nth-of-type(10) |
| 'Settings' menu icon | .css-15hrz07 a:nth-of-type(10) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(10) svg |
| 'Log Out' menu option | .css-15hrz07 a:last-child or .css-15hrz07 a:nth-of-type(11) |
.pp-top-bar-app-menu-list-item:nth-of-type(11) |
| 'Log Out' menu icon | .css-15hrz07 a:last-child svg or .css-15hrz07 a:nth-of-type(11) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(11) svg |
| All line spacers between menu options | .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) |
N/A |
Notifications Menu Pop Up
| Element | Class ID Selector | Label |
|---|---|---|
| Main parent container | ._notificationsPopover_abfem_72 |
[class*="notificationsPopover_"] |
| 'Notifications' title container | ._popoverHeader_abfem_100 |
[class*="popoverHeader_"] |
| 'Notifications' title text | ._popoverTitle_abfem_109 |
[class*="popoverTitle_"] |
| Buttons (Trash, Read All, Close) Flex Container | ._headerActions_abfem_117 |
[class*="headerActions_"] |
| Delete All Container | ._deleteAllButton_abfem_496 |
[class*="deleteAllButton_"] |
| Delete All Trash icon | ._deleteAllButton_abfem_496 svg |
[class*="deleteAllButton_"] svg |
| Read All Container | ._markAllReadButton_abfem_123 |
[class*="markAllReadButton_"] |
| Read All Checkmarks icon | ._markAllReadButton_abfem_123 svg |
[class*="markAllReadButton_"] svg |
| Close Menu Container | ._closeButton_abfem_124 |
[class*="closeButton_"] |
| Close Menu 'X' icon | ._closeButton_abfem_124 svg |
[class*="closeButton_"] svg |
| List of Notifs container | ._notificationsList_abfem_151 |
[class*="notificationsList_"] |
| Notification container | ._notificationItem_k9ox5_2 |
[class*="notificationItem_"] |
| Notif image outer container | ._avatarSection_k9ox5_33 |
N/A |
| Notif image inner container | a._avatarContainer_k9ox5_42 or ._avatarContainer_k9ox5_42 |
N/A |
| Notif bot image | ._characterAvatar_k9ox5_58 |
[class*="notificationItem_"] img:nth-of-type(1) |
| Notif user image | ._userAvatar_k9ox5_65 |
[class*="notificationItem_"] img:nth-of-type(2) |
| Text parent container | ._contentWrapper_k9ox5_85 |
[class*="contentWrapper_"] |
| Text flex container | ._content_k9ox5_85 |
[class*="contentWrapper_"]>div |
| Notif subject line (first line of text) | ._subject_k9ox5_116 |
N/A |
| Notif content text (second line of text) | ._body_k9ox5_132 |
N/A |
| Notif time stamp (third line of text) | ._timestamp_k9ox5_145 |
N/A |
| Delete/Archive Notification button container | ._archiveSection_k9ox5_153 |
[class*="archiveSection_"] |
| Delete/Archive Notification button | ._archiveButton_k9ox5_170 |
[aria-label="Archive notification"] |
| Trash can icon | ._archiveButton_k9ox5_170 svg |
[aria-label="Archive notification"] svg |
| Unread Notification Text Parent Container | ._contentWrapperUnread_k9ox5_102 |
N/A |
| Unread Notification subject line text | ._subjectUnread_k9ox5_125 |
[class*="subjectUnread_"] |
| Unread notification indicator bar | ._unreadIndicator_k9ox5_23 |
[class*="unreadIndicator_"] |
| 'Load More' Button | ._loadMoreButton_abfem_382 |
[class*="loadMoreButton_"] |
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 | Class ID Selector | Label |
|---|---|---|
| Header parent container | .css-1n2ma9q |
N/A |
| Main container | .css-18eafy0 FORMERLY .css-bqd4p6 |
.pp-top-bar or .profile-top-bar Note: these labels are shared with desktop |
| 'Back' button section container | .css-13qw20c |
N/A |
| 'Back' button container | .css-1v7jfo7 or .css-13qw20c>button |
.pp-top-bar-back-button or .profile-top-bar-back-button |
| '<' icon | .css-1dwr89y or .css-13qw20c>button span or .css-13qw20c>button svg |
.pp-top-bar-back-button svg |
| 'Back' text | .css-1rokoft or .css-13qw20c>button p |
.pp-top-bar-back-button p |
| 'janitorai' section container | .css-1nsonir |
N/A |
| 'janitorai' section inner container (this hides text overflow) | .css-1o4wo1x or .css-1nsonir>div |
N/A |
| 'janitorai' text | .css-16g2f4q or .css-1nsonir p |
.pp-top-bar-title or .profile-top-bar-title |
| Announcement/Notification button section container | .css-7f563p |
N/A |
Mobile Footer Menu
| Element | Class ID Selector | Label |
|---|---|---|
| Main footer container | .css-1qf4tpw |
N/A |
| Links/Icon container | .css-avv0po |
.pp-mnb-container |
| All links (excluding user menu) | .css-avv0po a |
.pp-mnb-container a |
| All link containers (excluding user menu) | .css-1l8kxqv |
.pp-mnb-item |
| All icons (excluding user menu) | .css-avv0po svg |
.pp-mnb-container svg |
| Home menu link | .css-avv0po>a:nth-child(1) |
.pp-mnb-container a:nth-of-type(1) |
| Home menu icon (house icon) | .css-avv0po>a:nth-child(1) svg |
.pp-mnb-item:nth-of-type(1) svg |
| Chats menu link | .css-avv0po>a:nth-child(2) |
.pp-mnb-container a:nth-of-type(2) |
| Chats menu icon (chat bubble icon) | .css-avv0po>a:nth-child(2) svg |
.pp-mnb-item:nth-of-type(2) svg |
| Search/Explore menu link | .css-avv0po>a:nth-child(3) |
.pp-mnb-container a:nth-of-type(3) |
| Search/explore menu icon (magnifying glass) | .css-avv0po>a:nth-child(3) svg |
.pp-mnb-item:nth-of-type(3) svg |
| User menu link container | .css-avv0po>div:last-child or .css-dvxtzn |
.pp-mnb-container>div:last-child |
| User menu link flex container | .css-1ib4t17 |
.pp-mnb-user-menu |
| User menu link transformation layer | .css-1u2nttd FORMERLY .css-nhknnx |
.pp-top-bar-app-menu |
| User menu link inner container layer 1 | .css-xl71ch |
.pp-top-bar-app-menu>span |
| User menu link inner container layer 2 (contains transition) | .css-2jhocq |
N/A |
| User menu avatar image container | .css-1vc3px3 or .css-dvxtzn span:nth-of-type(2) |
.pp-top-bar-app-menu span:nth-of-type(2) |
| User menu avatar image | .css-mnkk9b or .css-dvxtzn img |
.pp-mnb-container img |
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 | Class ID Selector | Label |
|---|---|---|
| All tooltip text boxes | .css-jdhqy4>div |
N/A |
| Tooltip arrow outer container | .css-jdhqy4 .css-0 |
.chakra-tooltip__arrow-wrapper |
| Tooltip arrow inner container | .css-1ugx2pr needs !important to make changes |
.chakra-tooltip__arrow |
| Followed/Unfollowed green creator pop up (toast) container | .sonner-toast-container |
[data-sonner-toaster] |
| Followed/Unfollowed green creator pop up | .sonner-toast-container li |
.sonner-toast-container [data-sonner-toast][data-type=success] |
| Followed/Unfollowed green checkmark icon | .sonner-toast-container li>div:first-child |
.sonner-toast-container [data-sonner-toast][data-type=success] [data-icon] |
| Followed/Unfollowed green text container | .sonner-toast-container li>div:last-child |
[data-sonner-toast][data-styled=true] [data-content] |
| Followed/Unfollowed green text | .sonner-toast-container li>div:last-child>div |
[data-sonner-toast][data-styled=true] [data-title] |
| Follow/Unfollow tooltip text | .css-1mdyyu3 |
.profile-uc-follow-tooltip |
| 'Block this creator' tooltip parent container | .css-r6z5ec |
N/A |
| 'Block this creator' tooltip inner container | .css-1f9crt2 |
#menu-list-public-profile-block-menu |
| 'Block this creator' tooltip flex container | .css-1izfp9f |
.pp-uc-options-menu-item |
| 'Block this creator' X close button | .css-7halv9 |
.pp-uc-options-menu-item span:first-child |
| 'Block this creator' X close button icon | .css-7halv9 svg |
.pp-uc-options-menu-item span:first-child svg |
| 'Block this creator' text | .css-1izfp9f span:last-child |
.pp-uc-options-menu-item 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 |
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)
Yup that's it for now. Thanks for being here!