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

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

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:

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

'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: 12 Aug 2025 22:58 UTC

Views: 9117