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

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

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

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

'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)
  • 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!

Edit

Pub: 29 Apr 2025 03:44 UTC

Edit: 23 Feb 2026 09:34 UTC

Views: 22979