Puppy's JAI Page Breakdown! thumbupemoji

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.

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 targetting classes and not their class ID selectors, as those are subject to change frequently
UPDATED: 09/07/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-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-12lnk4a .pp-cc-wrapper
Background Layer 1 .css-12lnk4a>.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-1n07wna .pp-cc-wrapper
Background Layer 1 .css-1n07wna>.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-1sxhvxh:has(.css-nip9dx) .pp-cc-wrapper
Background Layer 1 .css-1sxhvxh: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-v57joh .pp-cc-wrapper
Background Layer 1 .css-v57joh>.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-1dl87xx .pp-cc-wrapper
Background Layer 1 .css-1dl87xx>.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 .css-tyeyao or header .profile-top-bar-flex-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) .css-y19uhj .pp-page-background or .profile-page-background
Profile/Botcard flex parent container .css-1wfbrwg .profile-page-flex
Footer container ._footer_mxlg5_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 .css-tyeyao FORMERLY: .css-1cjenuj, .css-anekkm profile-top-bar-flex-outer
Header inner flex container (contains header sub-containers 1 and 2) .css-151faa7 FORMERLY: .css-1sybr60,.css-p641ht .pp-top-bar or .profile-top-bar
Header Sub-container 1 (houses the JAI beta logo and search bar) .css-17xq282 .profile-top-box-flex-inner
JAI logo main container .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 or .css-vv3ja7 .pp-top-bar-logo-name or .profile-top-bar-logo-name
"Beta" text portion .glow-logo p or .css-126p26a FORMERLY: .css-55tioa .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 container .css-bar9lc .profile-top-bar-search-box
Search bar form .css-bar9lc>form N/A
Search bar secondary container .css-1y0e7gb .profile-top-bar-search-input-group
Magnifying glass container .css-j2xror .chakra-input__left-element
Magnifying glass subcontainer .css-j1p8gu N/A
Magnifying glass icon .css-j1p8gu svg N/A
Search bar background .css-i6srjg .pp-top-bar-search or .profile-top-bar-search
Search bar text container ("you can search hashtags..." text) ._mentions--singleLine_sl551_1 FORMERLY ._mentions--singleLine_gae3o_1 N/A
Search bar text sub-container ._mentions__control_sl551_1 FORMERLY ._mentions__control_gae3o_1 N/A
Search bar placeholder text ._mentions__input_sl551_9 #search-input
Small space at end of search bar .css-cl9tqy .chakra-input__right-element
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, announcements button, and user button) .css-p641ht>.css-wd8hou N/A
Create character button div .css-p641ht>.css-wd8hou>div:nth-child(1) N/A
Create character button .css-1yhasuw 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 button container ._notificationsContainer_r64xs_2 FORMERLY .css-18yip8r [aria-label="Notifications"]
Notification bell container ._notificationIcon_r64xs_31 FORMERLY .css-11o5hw8 N/A
Notification bell ._notificationIcon_r64xs_31 svg N/A
Unread notification circle ._notificationsBadge_r64xs_41 N/A
Announcement button container ._notificationsContainer_1p8j9_2 FORMERLY .css-fss3o9 N/A
Announcement megaphone container ._notificationsButton_1p8j9_7 [aria-label="Global notifications"]
Announcement megaphone ._notificationsButton_1p8j9_7 svg N/A
User icon container .css-128hf7l FORMERLY .css-bu13fv .pp-top-bar-app-menu or .profile-top-bar-app-menu
User icon secondary container .css-128hf7l>.css-xl71ch N/A
User icon transition layer .css-2jhocq N/A
User icon image container .css-wac9aa N/A
User icon image .css-wac9aa 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/Show tags button section container .css-1x51k4p or .css-1dljitb>div:nth-child(3) N/A
Tags/Show tags button section container layer 2 .css-18936vg or .css-1dljitb>div:nth-child(3)>div N/A
Tags/Show tags button section container layer 3 (idk what this is here for) .css-1dljitb>div:nth-child(3)>div>.css-0 N/A
'Tags' header container .css-1dljitb>div:nth-child(3)>div>div>header or .css-178jenf N/A
Tags/Show tags button section container layer 4 (idk what this is here for again) .css-1dljitb>div:nth-child(3)>div>div>div>.css-0 N/A
Tags/Show tags button section container layer 4 (idk what this is here for againx2) .css-1dljitb>div:nth-child(3)>div>div>div>div>.css-0 N/A
Tags/Show tags button section container layer 4 (idk what this is here for againx3 yes i its ridiculous i know) .css-1dljitb>div:nth-child(3)>div>div>div>div>div>.css-0 N/A
'Show All Tags'/'Hide All Tags' button .css-11dtrcq or .css-1dljitb>div:nth-child(3)>div>div>div>div>div>div>button N/A
Filter tags main container .css-1dljitb>div:nth-child(3)>div>div>div>div>div>div>div:nth-child(1) N/A
Filter tags main container layer 2 .css-1dljitb>div:nth-child(3)>div>div>div>div>div>div>div>.css-0 N/A
Filter tags flex container .css-tn23vd N/A
Filter tag container .css-tn23vd>.css-1yp4ln or .css-tn23vd li N/A
Filter tag container layer 2 .css-tn23vd li>div N/A
Filter tag container layer 3 .css-tn23vd .css-70qvj9 N/A
Filter tag styling .css-tn23vd span 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_r64xs_72 N/A
'Notifications' title container ._popoverHeader_r64xs_100 N/A
'Notifications' title text ._popoverTitle_r64xs_109 or ._popoverHeader_r64xs_100 h4 N/A
Close Menu Container ._closeButton_r64xs_117 N/A
Close Menu 'X' icon ._closeButton_r64xs_117 svg N/A
List of Notifs container ._notificationsList_r64xs_139 N/A
Notification container ._notificationItem_18k4v_2 N/A
Notif image outer container ._avatarSection_18k4v_33 N/A
Notif image inner container ._avatarContainer_18k4v_42 N/A
Notif bot image ._characterAvatar_18k4v_49 N/A
Notif user image ._userAvatar_18k4v_56
Text parent container ._contentWrapper_18k4v_76 N/A
Text flex container ._content_18k4v_76 N/A
Notif subject line (first line of text) ._subject_18k4v_107 N/A
Notif content text (second line of text) ._body_18k4v_123 N/A
Notif time stamp (third line of text) ._timestamp_18k4v_136 N/A
Delete/Archive Notification button container ._archiveSection_18k4v_144 N/A
Delete/Archive Notification button ._archiveButton_18k4v_161 [aria-label="Archive notification"]
Trash can icon ._archiveButton_18k4v_161 svg [aria-label="Archive notification"] svg
Unread Notification subject line text ._subjectUnread_18k4v_116 N/A
Unread notification indicator bar ._unreadIndicator_18k4v_23 N/A
'Load More' Button ._loadMoreButton_r64xs_370 N/A

Announcements Menu Pop Up

Element Class ID Selector Label
Main parent container ._notificationsPopover_1p8j9_72 N/A
'Notifications' title container ._popoverHeader_1p8j9_102 N/A
'Notifications' title text ._popoverTitle_1p8j9_111 or ._popoverHeader_1p8j9_102 h3 N/A
Close Menu Container ._closeButton_1p8j9_118 N/A
Close Menu 'X' icon ._closeButton_1p8j9_118 svg N/A
List of announcements container ._notificationsList_1p8j9_140 N/A
High Priority indicator bar ._priorityHigh_1p8j9_274 N/A
Medium Priority indicator bar ._priorityMedium_1p8j9_278 N/A
Empty Announcements container ._emptyState_1p8j9_287 N/A
Empty Announcements Megaphone icon ._emptyStateIcon_1p8j9_293 or ._emptyState_1p8j9_287 svg N/A
Empty Announcements 'No Notifications' text ._emptyStateTitle_1p8j9_299 or ._emptyState_1p8j9_287 p:first-child N/A
Empty Announcements 'All caught up' text ._emptyStateMessage_1p8j9_306 or ._emptyState_1p8j9_287 p:last-child N/A

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:

1
2
3
@media (max-width: 575.98px){
.element { property changes here}
}

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
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:

setTimeout( ()=>{ debugger }, 3000)

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:

1
2
3
document.querySelectorAll('*').forEach(element => {
    element.style.pointerEvents = 'auto';
});

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

Element Label Updates

Provided: 08/12/25

'css-10cv7r2': 'profile-character-card-stats-box',
 'css-123m5uu': 'profile-character-card-tags-wrap',
 'css-126p26a': 'profile-top-bar-logo-sub-name',
 'css-147i79y': 'profile-character-card-avatar-image',
 'css-14l6kwv': 'profile-page-container',
 'css-14plm5m': 'pp-tag-scifi',
 'css-151faa7': 'profile-top-bar',
 'css-15vqpxh': 'profile-info-wrapper-box',
 'css-1747r9t': 'profile-page-container-flex-box',
 'css-17kq3e7': 'profile-background-box-2',
 'css-17xejub': 'profile-top-box-search-input-spacer-bottom',
 'css-17xq282': 'profile-top-box-flex-inner',
 'css-18bnokj': 'profile-avatar',
 'css-199gcrh': 'profile-character-card-description-box',
 'css-19cg9cj': 'profile-background-box-3',
 'css-19ihot3': 'profile-character-card-star',
 'css-1baulvz': 'NONE_NEED_TO_SET',
 'css-1bejyq4': 'profile-pagination-flex-inner',
 'css-1bmggo3': 'profile-top-bar-logo',
 'css-1bn1yyx': 'profile-about-me',
 'css-1bx5ylf': 'profile-tabs-chakra-tabs',
 'css-1c9wmts': 'profile-character-card-box',
 'css-1cdqd3a': 'profile-filters-flex-outer',
 'css-1cfoi85': 'profile-tab-panel',
 'css-1cpzkbw': 'profile-top-bar-auth-buttons-register',
 'css-1eee8fp': 'profile-tabs-panels',
 'css-1eq7ggy': 'pp-tag-test1',
 'css-1fcg30q': 'profile-character-card-tokens-count',
 'css-1fghc3k': 'profile-badge-flex-outer',
 'css-1gg9wg4': 'pp-cc-list-container',
 'css-1gpctw1': 'profile-pagination-next-button-icon',
 'css-1i3ggec': 'profile-filters-flex-inner-onorderchanged',
 'css-1igwmid': 'profile-pagination-prev-hstack',
 'css-1jf56se': 'pp-cc-gradient-3',
 'css-1jj3srb': 'profile-tabs-button',
 'css-1jy826p': 'profile-filters-flex-inner-hassearchfilter',
 'css-1ket5wn': 'profile-character-card-ribbon',
 'css-1lgnt2x': 'profile-character-card-star-line',
 'css-1m0lwfp': 'profile-character-card-creator-name-link',
 'css-1m151rf': 'profile-character-card-creator-name-box',
 'css-1n0er3b': 'profile-top-bar-auth-buttons',
 'css-1n2in4t': 'profile-filter-button',
 'css-1pfxi6a': 'profile-pagination-flex-outer',
 'css-1ppnvkj': 'pp-tag-test2',
 'css-1pu4t7k': 'pp-tag-postapocalyptic1',
 'css-1q7rmf0': 'profile-character-card-avatar-aspect-ratio',
 'css-1qft3au': 'characters-list-container-flex',
 'css-1s5evre': 'profile-character-card-stack',
 'css-1sgyc8q': 'profile-top-bar-discord-widget-menu-list',
 'css-1skvcpg': 'footer-box',
 'css-1sxhvxh': 'profile-character-card-wrapper',
 'css-1uodvt1': 'profile-info-hstack',
 'css-1utguok': 'profile-member-since-box',
 'css-1vakbk4': 'profile-uc-follow-flex',
 'css-1wfbrwg': 'profile-page-flex',
 'css-1wy0on6': 'react-select__indicators',
 'css-1y0e7gb': 'profile-character-search-input-group',
 'css-1y3jyt3': 'profile-tabs-indicator',
 'css-1ylu7un': 'profile-character-card-tag-limitless'

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!

Edit

Pub: 29 Apr 2025 03:44 UTC

Edit: 11 Oct 2025 05:22 UTC

Views: 12312