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.
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)
UPDATED: 08/10/2025
N/A = Not Applicable (no equivalent for this field)
To do:
- Adding picture references
- General background/main/root things
- 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 PREVIOUSLY ..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
Profile Box
Element | Class ID Selector | Label |
---|---|---|
Profile box layer 1 (main container) | .css-1wfbrwg>div:nth-child(1) |
.pp-uc-background |
Background layer 1 | .css-1wfbrwg>div:nth-child(1)>.css-0 |
N/A |
Background layer 2 | .css-1wfbrwg>div:nth-child(1)>div:nth-child(2) |
N/A |
Background layer 3 | .css-1wfbrwg>div:nth-child(1)>div:nth-child(3) |
N/A |
Profile box inner container | .css-1wfbrwg>div:nth-child(1)>div:nth-child(4) |
N/A |
Profile box inner stack (contains the ordering of user info, bio, and follow/options buttons) | .css-1wfbrwg>div:nth-child(1)>div>.css-8g8ihq |
N/A |
User info main container (contains profile image, username, followers, badges, date joined) | .css-1uodvt1 |
N/A |
Profile image container | .css-79elbk |
.pp-uc-avatar-container |
Profile image | .css-18bnokj or .css-79elbk img |
.pp-uc-avatar |
User info container (contains username, followers, badges, date joined, NOT PFP) | .css-1uodvt1>.css-8g8ihq |
N/A |
Username container | .css-70qvj9 or .css-1uodvt1>.css-8g8ihq>div:nth-child(1) |
N/A |
Username | .css-70qvj9 h2 or .css-o5an2m or .css-1uodvt1>.css-8g8ihq>div:nth-child(1) h2 |
.pp-uc-title |
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 |
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 |
Date joined | .css-1uodvt1>.css-8g8ihq>div:nth-child(4) |
.pp-uc-member-since |
Profile Bio main container | .css-1bn1yyx |
.pp-uc-about-me |
Follow/Options button main container | .css-1uodvt1>.css-8g8ihq>div:nth-child(3) |
N/A |
Follow/Options flex container | .css-y9k5u7 |
N/A |
Follow button main container | .css-y9k5u7>div:nth-child(1) or .css-1vakbk4 |
N/A |
Follow button outer styling (border) | .Btn |
.pp-uc-follow-button |
Follow button inner styling (background) | .Btn:before |
.pp-uc-follow-button:before |
Follow button text | .Btn span |
N/A |
Options button main container | .css-15w88gn |
.pp-uc-options-menu |
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 |
N/A |
Header inner flex container (contains header sub-containers 1 and 2) | .css-151faa7 FORMERLY: .css-1sybr60,.css-p641ht |
.pp-top-bar |
Header Sub-container 1 (houses the JAI beta logo and search bar) | .css-17xq282 |
N/A |
JAI logo main container | .css-17xq282 a or .css-8uj2do |
N/A |
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 |
"Janitor" text portion | .glow-logo h2 or .css-vv3ja7 |
.pp-top-bar-logo-name |
"Beta" text portion | .glow-logo p or .css-126p26a FORMERLY: .css-55tioa |
.pp-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) |
N/A |
Search bar main container | .css-bar9lc |
N/A |
Search bar form | .css-bar9lc>form |
N/A |
Search bar secondary container | .css-1y0e7gb |
N/A |
Magnifying glass container | .css-j2xror |
N/A |
Magnifying glass subcontainer | .css-j1p8gu |
N/A |
Magnifying glass icon | .css-j1p8gu svg |
N/A |
Search bar background | .css-i6srjg |
.pp-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 |
Empty space between the search bar and create character button | .css-17xejub:nth-of-type(2) |
N/A |
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 |
Create character button on hover (the purple) | .glow-on-hover:before |
.pp-top-bar-create-char:before |
Create character button on hover background layer (the grey) | .glow-on-hover:after |
.pp-top-bar-create-char:after |
Notifications button container | .css-18yip8r |
N/A |
Notification bell container | .css-11o5hw8 |
N/A |
Notification bell | .css-11o5hw8 svg |
N/A |
Unread notification circle | .css-m9a976 PREVIOUSLY .css-1cxauvg |
N/A |
Notifications Menu (see lower in the document for the DOM breakdown for this, but the menu element appears in order here) | .css-1qq679y |
N/A |
Announcement button container | .css-fss3o9 |
.pp-top-bar-discord-button |
Announcement megaphone container | .css-fss3o9>.css-xl71ch or .css-fss3o9 span |
N/A |
Announcement megaphone | .css-fss3o9 svg |
N/A |
Announcement popup window | .css-lnyvlk |
N/A |
User icon container | .css-128hf7l PREVIOUSLY .css-bu13fv |
.pp-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) |
N/A |
'Character' tab main container (the blue 'Characters' profile tab) | .css-1bx5ylf |
N/A |
'Character' tab button container | .css-i3ef4m |
.pp-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 |
'Character' tab button glowing bar | .css-1y3jyt3 |
.pp-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 |
Character page container layer 3 | .css-1bx5ylf>div:nth-child(2)>div |
N/A |
Character page container layer 4 | .css-2n7zf2 |
N/A |
Character page flexbox (contains Character page sub-container 1 , 2, and 3) | .css-2n7zf2>div |
N/A |
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 |
N/A |
Number of characters main container | .css-6su6fj or .css-m8ywhg>div:nth-child(1) |
N/A |
Number of characters flex layer | .css-1pfxi6a |
N/A |
Number of characters styling (border) | .Btn2-purple |
.pp-pg-total |
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 |
N/A |
Number of characters number | .Btn2-purple>.css-wd8hou strong |
.pp-pg-total-count |
Number of characters text | .Btn2-purple>.css-wd8hou p |
.pp-pg-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 |
N/A |
Character search bar, filter button, latest menu flex container (aligns the 3 items) | .css-mcoi9a |
N/A |
Character search bar main container | .css-1jy826p |
N/A |
Character search bar container layer 2 | .css-1jy826p>.css-1y0e7gb |
N/A |
Character search bar input | .css-3rot3 |
.pp-fl-search-input |
Tag filters button main container | .css-1n2in4t |
.pp-fl-filter-button |
Tag filters icon | .css-1n2in4t svg |
.pp-fl-filter-button svg |
Latest filtering menu main container | .css-1i3ggec |
N/A |
Latest filtering menu container layer 2 | .css-b62m3t-container |
N/A |
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) |
N/A |
Page counter parent flex container | .css-1pfxi6a SHARED ID WITH NUMBER OF CHARACTERS |
N/A |
Page arrows and page number flex container | .css-1igwmid |
N/A |
'<' Page arrow container | .css-1gpctw1:nth-of-type(1) |
.pp-pg-prev-button |
'<' Page arrow | .css-1gpctw1:nth-of-type(1) svg |
.pp-pg-prev-button svg |
Page number container | .css-1bejyq4 |
N/A |
Page number | .css-1bejyq4>div |
.pp-pg-page-button |
'>' Page arrow container | .css-1gpctw1:nth-of-type(2) |
.pp-pg-next-button |
'>' Page arrow | .css-1gpctw1:nth-of-type(2) svg |
.pp-pg-next-button 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 |
N/A |
'Popular' Menu Option | .css-qr46ko>div:nth-child(1) |
N/A |
'Latest' Menu Option | .css-qr46ko>div:nth-child(2) |
N/A |
'Trending' Menu Option | .css-qr46ko>div:nth-child(3) |
N/A |
'Trending 24h' Menu Option | .css-qr46ko>div:nth-child(4) |
N/A |
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 PREVIOUSLY .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-uv5nn8 PREVIOUSLY .css-19h42zx |
.pp-top-bar-app-menu-list |
All menu options | .css-uv5nn8 a |
pp-top-bar-app-menu-list-item |
'Profile' menu option | .css-uv5nn8>a:first-child or .css-uv5nn8 a:nth-of-type(1) |
pp-top-bar-app-menu-list-item:nth-of-type(1) |
'Profile' menu icon | .css-uv5nn8>a:first-child svg or .css-uv5nn8 a:nth-of-type(1) svg |
pp-top-bar-app-menu-list-item:nth-of-type(1) svg |
'Create Character' menu option | .css-uv5nn8 a:nth-of-type(2) |
pp-top-bar-app-menu-list-item:nth-of-type(2) |
'Create Character' menu icon | .css-uv5nn8 a:nth-of-type(2) svg |
pp-top-bar-app-menu-list-item:nth-of-type(2) svg |
'My Characters' menu option | .css-uv5nn8 a:nth-of-type(3) |
pp-top-bar-app-menu-list-item:nth-of-type(3) |
'My Characters' menu icon | .css-uv5nn8 a:nth-of-type(3) svg |
pp-top-bar-app-menu-list-item:nth-of-type(3) svg |
'My Chats' menu option | .css-uv5nn8 a:nth-of-type(4) |
pp-top-bar-app-menu-list-item:nth-of-type(4) |
'My Chats' menu icon | .css-uv5nn8 a:nth-of-type(4) svg |
pp-top-bar-app-menu-list-item:nth-of-type(4) svg |
'My Personas' menu option | .css-uv5nn8 a:nth-of-type(5) |
pp-top-bar-app-menu-list-item:nth-of-type(5) |
'My Personas' menu icon | .css-uv5nn8 a:nth-of-type(5) svg |
pp-top-bar-app-menu-list-item:nth-of-type(5) svg |
'Following' menu option | .css-uv5nn8 a:nth-of-type(6) |
pp-top-bar-app-menu-list-item:nth-of-type(6) |
'Following' menu icon | .css-uv5nn8 a:nth-of-type(6) svg |
pp-top-bar-app-menu-list-item:nth-of-type(6) svg |
'Blocks' menu option | .css-uv5nn8 a:nth-of-type(7) |
pp-top-bar-app-menu-list-item:nth-of-type(7) |
'Blocks' menu icon | .css-uv5nn8 a:nth-of-type(7) svg |
pp-top-bar-app-menu-list-item:nth-of-type(7) svg |
'Media Gallery' menu option | .css-uv5nn8 a:nth-of-type(8) |
pp-top-bar-app-menu-list-item:nth-of-type(8) |
'Media Gallery' menu icon | .css-uv5nn8 a:nth-of-type(8) svg |
pp-top-bar-app-menu-list-item:nth-of-type(8) svg |
'Settings' menu option | .css-uv5nn8 a:nth-of-type(9) |
pp-top-bar-app-menu-list-item:nth-of-type(9) |
'Settings' menu icon | .css-uv5nn8 a:nth-of-type(9) svg |
pp-top-bar-app-menu-list-item:nth-of-type(9) svg |
'Log Out' menu option | .css-uv5nn8 a:last-child or .css-uv5nn8 a:nth-of-type(10) |
pp-top-bar-app-menu-list-item:nth-of-type(10) |
'Log Out' menu icon | .css-uv5nn8 a:last-child svg or .css-uv5nn8 a:nth-of-type(10) svg |
pp-top-bar-app-menu-list-item:nth-of-type(10) svg |
All line spacers between menu options | .css-uv5nn8 hr (if you'd like to target each one individually, then .css-uv5nn8 hr:nth-of-type(n) where n is 1 - 8 of the lines) |
N/A |
Notifications Menu Pop Up
Element | Class ID Selector | Label |
---|---|---|
Main Notif Popout Container | .css-1qq679y |
N/A |
Notif Secondary Popout Container (has transform-origin) | .css-1g1g04k or .css-1qq679y>div |
N/A |
Padding Container around popout menu | .css-1ktkhj5 |
N/A |
Notif Menu Flex Container | .css-1rl3sf5 |
N/A |
Notif Menu Background Layer 1 | .css-1rl3sf5>div:nth-child(1) or .css-1rl3sf5 .css-0 |
N/A |
Notif Menu Background Layer 2 | .css-1rl3sf5>div:nth-child(2) |
N/A |
Notif Menu Background Layer 3 | .css-1rl3sf5>div:nth-child(3) |
N/A |
Notif Menu Background Layer 4 | .css-1rl3sf5>div:nth-child(4) |
N/A |
Inner Notif Container (houses the notif boxes and title) | .css-18pw4vc PREVIOUSLY .css-v8syye |
.notifications-widget |
Notifications Title Container | .css-tspj11 |
N/A |
Notifications Title Text | .css-1f84q7v or .css-tspj11 h4 |
N/A |
Notif 'X' close button outer container | .css-tspj11 .css-0 or .css-tspj11>div:nth-child(2) |
N/A |
Notif 'X' close button flex container | .css-q0xxaj or .css-tspj11 button |
N/A |
Notif 'X' close button icon | .css-q0xxaj svg or .css-tspj11 svg |
N/A |
Notifications flex container (houses and separates each individual notif) | .css-10k9nsp |
N/A |
Top-most notification container | .css-1pibr72 |
N/A |
Notification container (excluding first notification) | .css-1fv6c2q |
N/A |
Un-read/new notification bar | .css-1a7v8fx |
N/A |
Un-read/new notification outer text container | .css-dwa21x |
N/A |
Read notification outer text container | .css-1gacr47 |
N/A |
Notification Text flex container | .css-mrzuup |
N/A |
First line of text (USER replied/left...) | .css-mrzuup p:first-of-type |
N/A |
Contents of notification | .css-mrzuup p:nth-of-type(2) |
N/A |
Date of notification | .css-mrzuup p:last-of-type |
N/A |
Trashcan icon container | .css-z3gqzd |
N/A |
Trashcan icon inner container | .css-z3gqzd>button |
N/A |
Trashcan icon | .css-z3gqzd svg |
N/A |
'Load More' button | .css-130w8n4 |
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:
Mobile Header
Element | Class ID Selector | Label |
---|---|---|
Main container | .css-bqd4p6 |
.pp-top-bar Note: this label is 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 |
'<' 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 |
Announcement/Notification button section container | .css-7f563p |
N/A |
Announcement button container outer | .css-7f563p>div:nth-child(1) |
N/A |
Announcement button container inner | .css-7f563p .css-fss3o9 |
.pp-top-bar-discord-button Note: this label is shared with desktop |
Megaphone icon container | .css-7f563p .css-xl71ch or .css-7f563p .css-fss3o9 span |
.pp-top-bar-discord-button span Note: this label is shared with desktop |
Megaphone icon | .css-7f563p .css-xl71ch svg |
.pp-top-bar-discord-button svg Note: this label is shared with desktop |
Notifications container | .css-7f563p .css-18yip8r |
N/A |
Bell icon container | .css-7f563p .css-11o5hw8 |
N/A |
Bell icon | .css-7f563p .css-11o5hw8 svg |
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 PREVIOUSLY .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 |
'Follow Creator' tooltip | .css-yl8rnf |
N/A |
'Unfollow Creator' tooltip | .css-1mdyyu3 |
N/A |
'Block this creator' pop-up outer container | .css-r6z5ec |
N/A |
'Block this creator' pop-up inner container | .css-bp2fv5 |
N/A |
'Block this creator' pop-up flex container | .css-hab1hf |
N/A |
'Block this creator' pop-up X container | .css-7halv9 |
N/A |
'Block this creator' pop-up X icon | .css-7halv9 svg |
N/A |
'Block this creator' pop-up text | .css-hab1hf span:last-child |
N/A |
'Unfollowed/Followed the creator!' pop-up outer container | .css-dixmdy |
N/A |
'Unfollowed/Followed' pop-up container | .css-15gjm8r |
N/A |
'Unfollowed/Followed' check mark container | .css-14ogjxt |
N/A |
'Unfollowed/Followed' check mark icon | .css-14ogjxt svg |
N/A |
'Unfollowed/Followed' text container | .css-njbp03 |
N/A |
'Unfollowed/Followed' text | .css-161kwbg |
N/A |
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-uv5nn8 |
.css-19h42zx |
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!