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)
it is strongly recommended you use the LABELS for targeting classes and not their class ID selectors, as those are subject to change frequently
UPDATED: 10/21/2025
N/A = Not Applicable (no equivalent for this field)
To do:
- Adding picture references
- updating the header stuff and other things as the site changes guh
- Misc things (tooltips, edit button, etc.)
What's Here:
Default Bot Card Elements
| Element | Class ID Selector | Label |
|---|---|---|
| Default Bot Card Layer 1 (overall container) | .css-13wmn96 PREVIOUSLY: .css-1sxhvxh |
.pp-cc-wrapper or .profile-character-card-wrapper |
| Background Layer 1 | .css-1sxhvxh>.css-0 |
.pp-cc-gradient-1 |
| Background Layer 2 | .css-dltla |
.pp-cc-gradient-2 |
| Background Layer 3 | .css-1jf56se |
.pp-cc-gradient-3 |
| Main Bot Card Info Container | .css-1s5evre |
.profile-character-card-stack |
| Bot Link (contains name, chat ribbon, bot image) | .css-1s5evre a:nth-child(1) |
.profile-character-card-stack-link-component |
| Bot name container | .css-nlxhw4 |
.profile-character-card-stack-link-component-box |
| Bot name text | .css-nlxhw4>div |
.pp-cc-name or .profile-character-card-name-box |
| Chat ribbon main container | .css-10cv7r2 |
.profile-character-card-stats-box |
| Chat ribbon first span (I don't know what this is here for) | .css-10cv7r2>.css-1baulvz |
N/A |
| Chat ribbon outer container (applies the dropshadow and some positioning) | ._ribbon_1chl9_1 or .css-1ket5wn |
.pp-cc-ribbon or .profile-character-card-ribbon |
| Chat ribbon shape (gives the ribbon shape with background, box-shadow, clip-path) | ._content_1chl9_11 or .css-wexxj8 |
.pp-cc-ribbon-wrap or .profile-character-card-ribbon-wrap |
| Chat ribbon text container (contains chat count and icon) | .css-euh5x6 |
.pp-cc-chats or .profile-character-card-chats-hstack |
| Chat ribbon icon | .css-euh5x6 svg |
.pp-cc-chats svg |
| Chat ribbon number | .css-euh5x6 span |
.pp-cc-chats-count or .profile-character-card-chats-count |
| Bot image container | .css-1q7rmf0 |
.profile-character-card-avatar-aspect-ratio |
| Bot image | .css-1q7rmf0 img |
.pp-cc-avatar or .profile-character-card-avatar-image |
| Username on botcard | .css-1s5evre a:nth-child(2) |
.profile-character-card-creator-name-link |
| Username on botcard text | .css-1s5evre a:nth-child(2) span |
.pp-cc-creator-name or .profile-character-card-creator-name-box |
| Description container | .css-199gcrh |
.profile-character-card-description-box |
| Description paragraph container | .css-96l1id |
.pp-cc-description or .profile-character-card-description-markdown-container |
| Description paragraph text | .css-96l1id p or .css-199gcrh p |
.pp-cc-description p or .profile-character-card-description-markdown-container p |
| Star line separator | .css-1s5evre>div:nth-child(4) or .css-1lgnt2x |
.pp-cc-star-line or .profile-character-card-star-line |
| Star image | .css-1s5evre>div:nth-child(4) img or .css-1lgnt2x img |
.pp-cc-star or .profile-character-card-star |
| Tags container | .css-4ofde4 |
.pp-cc-tags or .profile-character-card-tags |
| Tags list container | .css-k1urot |
N/A |
| Limitless tag container | .css-123m5uu |
.pp-cc-tags-wrap or .profile-character-card-tags-wrap |
| Limitless tag styling | .css-123m5uu span |
.pp-tag-limitless or .profile-character-card-tag-limitless |
| All other tags (excluding custom tags) | .css-k1urot>.css-1yp4ln |
.pp-cc-tags-wrap-regular or .profile-character-card-tags-wrap or .profile-character-card-tags-wrap-regular |
| Tag styling | .css-k1urot span |
.pp-cc-tags-item or .pp-cc-tags-regular or .pp-tag-[nameoftag] where [nameoftag] corresponds to one of the default tag names e.g. .pp-tag-dominant |
| Custom tag styling | .pp-cc-tags-wrap-custom span FORMERLY ..customenabled |
pp-cc-tags-custom and .pp-tag-[customhere] note the [customhere] portion will match the custom tag you are looking to target in LOWERCASE e.g. .pp-tag-icecream |
| Token count container | .css-1c9wmts |
.profile-character-card-box |
| Token count text | .css-1c9wmts p |
.pp-cc-tokens-count or .profile-character-card-tokens-count |
Event-Specific Bot Card Elements
Valentine's 2025
| Element | Class ID Selector | Label |
|---|---|---|
| Bot Card Layer 1 (overall container) | .css-1mrg1rp PERVIOUSLY: .css-12lnk4a |
.pp-cc-wrapper |
| Background Layer 1 | .css-1mrg1rp>.css-0 |
.pp-cc-gradient-1 |
| Background Layer 2 | .css-dltla |
.pp-cc-gradient-2 |
| Background Layer 3 | .css-sfkyc4 |
.pp-cc-gradient-3 |
| Background Layer 4 | .css-1ifqy49 |
N/A |
| Background Layer 5 | .css-1drof3r |
N/A |
| Bot Name Text | .css-1on0xzz |
.pp-cc-name |
| Username Link Container | .css-16f51li |
N/A |
| Star Line Separator | .css-1pjvf4r |
.pp-cc-star-line |
| Star Image | .css-1h8fads |
.pp-cc-star |
| Hamster Container | .css-5v5qgx |
N/A |
| Hamster Image | .css-5v5qgx img |
N/A |
New Year 2025
| Element | Class ID Selector | Label |
|---|---|---|
| Bot Card Layer 1 (overall container) | .css-1udesvb PREVIOUSLY: .css-1n07wna |
.pp-cc-wrapper |
| Background Layer 1 | .css-1udesvb>.css-0 |
.pp-cc-gradient-1 |
| Background Layer 2 | .css-dltla |
.pp-cc-gradient-2 |
| Background Layer 3 | .css-1nf28v0 |
.pp-cc-gradient-3 |
| Background Layer 4 | .css-gum7ka |
N/A |
| Background Layer 5 | .css-ke8k8l |
N/A |
| Bot Name Text | .css-kesdt6 |
.pp-cc-name |
| Username Link Container | .css-vquwtv |
N/A |
| Star Line Separator | .css-nackew |
.pp-cc-star-line |
| Star Image | .css-ee63sa |
.pp-cc-star |
| 2025 Stamp | .css-1wqmh16 |
N/A |
Halloween
| Element | Class ID Selector | Label |
|---|---|---|
| Bot Card Layer 1 (overall container) | .css-13wmn96:has(.css-nip9dx) |
.pp-cc-wrapper |
| Background Layer 1 | .css-13wmn96:has(.css-nip9dx)>.css-0 |
.pp-cc-gradient-1 |
| Background Layer 2 | .css-dltla |
.pp-cc-gradient-2 |
| Background Layer 3 | .css-1xy4dr7 |
.pp-cc-gradient-3 |
| Bot Name Text | .css-7l95y2 |
.pp-cc-name |
| Username Link Container | .css-1yeq7x5 |
N/A |
| Star Line Separator | .css-1ov83hg |
.pp-cc-star-line |
| Star Image | .css-w470et |
.pp-cc-star |
| Pumpkin Container | .css-nip9dx |
N/A |
| Pumpkin Image | .css-nip9dx img |
N/A |
Christmas
| Element | Class ID Selector | Label |
|---|---|---|
| Bot Card Layer 1 (overall container) | .css-1hyhy7j PREVIOUSLY: .css-v57joh |
.pp-cc-wrapper |
| Background Layer 1 | .css-1hyhy7j>.css-0 |
.pp-cc-gradient-1 |
| Background Layer 2 | .css-dltla |
.pp-cc-gradient-2 |
| Background Layer 3 | .css-ievdy4 |
.pp-cc-gradient-3 |
| Bot Name Text | .css-6pkpcc |
.pp-cc-name |
| Username Link Container | .css-9pz3h |
N/A |
| Star Line Separator | .css-xr5j9y |
.pp-cc-star-line |
| Star Image | .css-7rspww |
.pp-cc-star |
| Christmas Lights Container | .css-xrg4vd |
N/A |
| Christmas Lights Image | .css-xrg4vd img |
N/A |
Passport To Pages
| Element | Class ID Selector | Label |
|---|---|---|
| Bot Card Layer 1 (overall container) | .css-y0anzw PREVIOUSLY: .css-1dl87xx |
.pp-cc-wrapper |
| Background Layer 1 | .css-y0anzw>.css-0 |
.pp-cc-gradient-1 |
| Background Layer 2 | .css-dltla |
.pp-cc-gradient-2 |
| Background Layer 3 | .css-1vbkq2z |
.pp-cc-gradient-3 |
| Background Layer 4 | .css-14hnweu |
N/A |
| Background Layer 5 | .css-obdrgl |
N/A |
| Background Layer 6 | .css-gcl0iy |
N/A |
| Bot Name Text | .css-vk0mim |
.pp-cc-name |
| Username Link Container | .css-due2rz |
N/A |
| Star Line Separator | .css-z6f8pk |
.pp-cc-star-line |
| Star Image | .css-17nmj64 |
.pp-cc-star |
| Palm Tree Emoji | .css-1awld45 |
N/A |
| Conch Shell Emoji | .css-1cui3us |
N/A |
Profile Page Elements
Main/General Page Elements
| Element | Class ID Selector | Label |
|---|---|---|
| Body | body |
N/A |
| Root | root |
N/A |
| Page flex container | ._wrapper_13xo6_1 |
N/A |
| Header container | ._header_1lgb1_1 or header PREVIOUSLY: .css-tyeyao |
.profile-top-bar-flex-outer or .pp-top-bar-outer |
| Profile main parent container (has side padding) | ._main_qqqm3_1 or main |
._customPadding_qqqm3_15 |
| Profile wrapper container (has top padding) | .css-14l6kwv |
.profile-page-container |
| Profile background (has image background if set) | UNIQUE | .pp-page-background or .profile-page-background |
| Profile/Botcard flex parent container | .css-1wfbrwg |
.profile-page-flex |
| Footer container | ._footer_b4zg4_1 or footer |
N/A |
Profile Box
| Element | Class ID Selector | Label |
|---|---|---|
| Profile box layer 1 (main container) | .css-1wfbrwg>div:nth-child(1) or .css-vqimyu |
.pp-uc-background or .profile-uc-background-flex |
| Background layer 1 | .css-1wfbrwg>div:nth-child(1)>.css-0 |
.profile-background-box-1 |
| Background layer 2 | .css-1wfbrwg>div:nth-child(1)>div:nth-child(2) |
.profile-background-box-2 |
| Background layer 3 | .css-1wfbrwg>div:nth-child(1)>div:nth-child(3) |
.profile-background-box-3 |
| Profile box inner container | .css-1wfbrwg>div:nth-child(1)>div:nth-child(4) |
.profile-info-wrapper-box |
| Profile box inner stack (contains the ordering of user info, bio, and follow/options buttons) | .css-1wfbrwg>div:nth-child(1)>div>.css-8g8ihq |
.profile-info-stack |
| User info main container (contains profile image, username, followers, badges, date joined) | .css-1uodvt1 |
.profile-info-hstack |
| Profile image container | .css-79elbk |
.pp-uc-avatar-container or .profile-avatar-container |
| Profile image | .css-18bnokj or .css-79elbk img |
.pp-uc-avatar or .profile-avatar |
| User info container (contains username, followers, badges, date joined, NOT PFP) | .css-1uodvt1>.css-8g8ihq |
.profile-info-stack-inner |
| Username container | .css-70qvj9 or .css-1uodvt1>.css-8g8ihq>div:nth-child(1) |
.profile-info-stack-inner-flex |
| Username | .css-70qvj9 h2 or .css-o5an2m or .css-1uodvt1>.css-8g8ihq>div:nth-child(1) h2 |
.pp-uc-title or .profile-title-heading |
| Verification badge container | .css-umxegz |
N/A |
| Verfication badge | .css-umxegz span or .css-70qvj9 .css-fo6ddv |
N/A |
| Moderator badge container | .css-8amxhq |
N/A |
| Moderator badge | .css-8amxhq img |
N/A |
| Number of followers container | .css-1uodvt1>.css-8g8ihq>div:nth-child(2) |
.pp-uc-followers-count or .profile-followers-count |
| Followers Number | .css-1uodvt1>.css-8g8ihq>div:nth-child(2) span:nth-of-type(1) |
.pp-uc-followers-count span:nth-of-type(1) |
| Followers text | .css-1uodvt1>.css-8g8ihq>div:nth-child(2) span:nth-of-type(2) |
.pp-uc-followers-count span:nth-of-type(2) |
| Event badge container | .css-hjkukh or .css-1uodvt1>.css-8g8ihq>div:nth-child(3) |
N/A |
| Event badges (non-specific) | .css-hjkukh>div or .css-x3wokz or .css-hjkukh img |
N/A |
| Member Since/Date joined | .css-1uodvt1>.css-8g8ihq>div:nth-child(4) |
.pp-uc-member-since or .profile-member-since-box |
| Profile Bio main container | .css-1bn1yyx |
.pp-uc-about-me or .profile-about-me |
| Follow/Options button main container | div:has(>.css-y9k5u7) |
N/A |
| Follow/Options flex container | .css-y9k5u7 |
N/A |
| Follow button main container | .css-y9k5u7>div:nth-child(1) or .css-1vakbk4 |
.profile-uc-follow-flex |
| Follow button outer styling (border) | .Btn |
.pp-uc-follow-button or .profile-uc-follow-button |
| Follow button inner styling (background) | .Btn:before |
.pp-uc-follow-button:before or .profile-uc-follow-button:before |
| Follow button text | .Btn span |
.profile-uc-follow-text |
| Options button main container | .css-15w88gn |
.pp-uc-options-menu or .chakra-menu__menu-button |
| Options button text | .css-15w88gn>span:nth-child(1) or .css-xl71ch |
N/A |
| Options button 3 dots container | .css-15w88gn>span:nth-child(2) or .css-1hzyiq5 |
N/A |
| Options button 3 dots | .css-1hzyiq5 svg or .css-15w88gn svg |
.pp-uc-options-menu svg |
Desktop Header
| Element | Class ID Selector | Label |
|---|---|---|
| Header Flex container | ._wrapper_13xo6_1 FORMERLY ._wrapper_1lcdj_1 |
N/A |
| Header parent container | ._header_1lgb1_1 FORMERLY .css-tyeyao |
profile-top-bar-flex-outer |
| Header inner flex container (contains header sub-containers 1 and 2) | ._bar_1lgb1_26 FORMERLY: .css-151faa7 |
.pp-top-bar or .profile-top-bar or .pp-top-bar-inner |
| Header Sub-container 1 (houses the JAI beta logo and search bar) | ._left_1lgb1_45 PREVIOUSLY .css-17xq282 |
.profile-top-box-flex-inner or .pp-top-bar-left |
| JAI logo main flex container | ._logoContainer_1lgb1_7 |
.profile-top-bar-logo-box (label is shared with link container below) |
| JAI logo main link container | .css-99y9bx PREVIOUSLY .css-17xq282 a or .css-8uj2do |
.profile-top-bar-logo-box |
| JAI logo container (has the background, box-shadow, text-shadow, and backdrop-filter) | .glow-logo or .css-1bmggo3 FORMERLY: .css-e8xvxi |
.pp-top-bar-logo or .profile-top-bar-logo |
| "Janitor" text portion | .glow-logo h2 |
.pp-top-bar-logo-name or .profile-top-bar-logo-name |
| "Beta" text portion | .glow-logo p |
.pp-top-bar-logo-sub-name or .profile-top-bar-logo-sub-name |
| Empty space between the JAI logo and search bar (yes it's an element, not sure why) | .css-17xejub:nth-of-type(1) |
.profile-top-box-search-input-spacer-top |
| Search bar main flex container | ._searchInputContainer_1lgb1_19 |
.profile-top-bar-search-wrapper |
| Search bar main container | ._container_fgb7n_1 PREVIOUSLY .css-bar9lc |
.profile-top-bar-search-box or .pp-top-bar-search-box |
| Search bar form | _form_1d69i_129 |
.pp-top-bar-search-form |
| Search bar secondary container | ._inputGroup_1d69i_1 FORMERLY .css-1y0e7gb |
.profile-top-bar-search-input-group or .pp-top-bar-search-input-group |
| Magnifying glass container | ._leftElement_1d69i_8 |
.pp-top-bar-search-icon |
| Magnifying glass subcontainer | ._searchIcon_1d69i_21 |
N/A |
| Magnifying glass icon | ._searchIcon_1d69i_21 svg |
.pp-top-bar-search-icon svg |
| Search bar background | ._inputContainer_1d69i_26 |
.pp-top-bar-search or .profile-top-bar-search or .search-input or .pp-top-bar-search-input |
| Search bar placeholder text | #search-input |
#search-input |
| Search History Parent Container | ._dropdown_1d69i_108 |
.pp-top-bar-search-history |
| Individual History Item container | ._historyItem_dg9q2_1 |
.pp-top-bar-search-history>div or [class*="historyItem_"] |
| History Item Outer Text Container | ._contentSection_dg9q2_53 |
[class*="contentSection_"] |
| Clock Icon Container | ._iconWrapper_dg9q2_61 |
[class*="iconWrapper_"] |
| Clock Icon SVG | ._iconWrapper_dg9q2_61 svg |
[class*="iconWrapper_"] svg |
| History Item Separator | ._historyItem_dg9q2_1:after |
N/A |
| History Item Text | ._queryText_dg9q2_67 |
[class*="queryText_"] |
| Remove From History Button | ._removeButton_dg9q2_79 |
[class*="removeButton_"] |
| Remove From History X SVG | ._removeButton_dg9q2_79 svg |
[class*="removeButton_"] svg |
| Small space at end of search bar | ._rightElement_1d69i_67 |
.pp-top-bar-search-right |
| Empty space between the search bar and create character button | .css-17xejub:nth-of-type(2) |
.profile-top-box-search-input-spacer-bottom |
| Header Sub-container 2 (houses the create character button, notifications button, and user button) | ._right_1lgb1_53 PREVIOUSLY .css-p641ht>.css-wd8hou |
.pp-top-bar-right |
| Header Sub-container 2 inner flex | ._container_1bfxv_1 |
N/A |
| Create character button | ._createButton_1bfxv_14 or .glow-on-hover |
.pp-top-bar-create-char or .profile-top-bar-create-char |
| Create character button on hover (the purple) | .glow-on-hover:before |
.pp-top-bar-create-char:before or .profile-top-bar-create-char:before |
| Create character button on hover background layer (the grey) | .glow-on-hover:after |
.pp-top-bar-create-char:after or .profile-top-bar-create-char:after |
| Notifications outer button container | ._notificationsContainer_abfem_2 |
N/A |
| Notifications button container | ._notificationsButton_abfem_7 FORMERLY .css-18yip8r |
[aria-label="Notifications"] |
| Notification bell | ._notificationsButton_abfem_7 svg |
[aria-label="Notifications"] svg |
| Unread notification circle | ._notificationsBadge_abfem_41 |
[class*="notificationsBadge_"] |
| User icon container | .css-rvct59 FORMERLY .css-128hf7l, .css-bu13fv |
.pp-top-bar-app-menu or .profile-top-bar-app-menu |
| User icon secondary container | .css-rvct59>.css-xl71ch |
N/A |
| User icon transition layer | .css-2jhocq |
N/A |
| User icon image container | .css-fsfp0u PREVIOUSLY .css-wac9aa |
N/A |
| User icon image | .css-fsfp0u img |
N/A |
Character/Bot Card Page Portion
| Element | Class ID Selector | Label |
|---|---|---|
| Main container (contains Character tab, number of characters, character search, filter button, latest menu, and bot card grid) | .css-1wfbrwg>div:nth-child(2) |
.profile-page-container-flex-box |
| 'Character' tab main container (the blue 'Characters' profile tab) | .css-1bx5ylf or #profile-tabs |
.profile-tabs-chakra-tabs |
| 'Character' tab button container | .css-i3ef4m |
.pp-tabs-wrapper or .profile-tabs-wrapper |
| 'Character' tab button background & text container | .css-1jj3srb (use .css-1jj3srb[aria-selected=true], .css-1jj3srb[data-selected] to change colour on selection) |
.pp-tabs-button or .profile-tabs-button |
| 'Character' tab button glowing bar | .css-1y3jyt3 |
.pp-tabs-indicator or .profile-tabs-indicator |
| Character page container layer 2 (contains number of characters, character search, filter button, latest menu, and bot card grid) | .css-1bx5ylf>div:nth-child(2) |
.pp-tabs-panels or .profile-tabs-panels |
| Character page container layer 3 | .css-1bx5ylf>div:nth-child(2)>div |
.profile-tab-panel |
| Character page container layer 4 | .css-2n7zf2 |
N/A |
| Character page flexbox (contains Character page sub-container 1 , 2, and 3) | .css-2n7zf2>div |
.characters-list-container-flex |
| Character page sub-container 1 (contains number of characters, character search, filter button, latest menu | .css-2n7zf2>div>div:nth-child(1) or .css-m8ywhg |
.character-list-pagination-flex |
| Number of characters main container | .css-6su6fj or .css-m8ywhg>div:nth-child(1) |
.character-list-pagination-box |
| Number of characters flex layer | .css-1pfxi6a |
.profile-pagination-flex-outer |
| Number of characters styling (border) | .Btn2-purple |
.pp-pg-total or .profile-badge-flex-outer |
| Number of characters styling (background) | .Btn2-purple:before |
.pp-pg-total:before |
| Number of character text flex container (contains number and 'characters' text | .Btn2-purple>.css-wd8hou |
.profile-badge-flex-inner |
| Number of characters number | .Btn2-purple>.css-wd8hou strong |
.pp-pg-total-count or .profile-badge-total-count |
| Number of characters text | .Btn2-purple>.css-wd8hou p |
.pp-pg-total-text or .profile-badge-total-text |
| Character search bar, filter button, latest menu main container | .css-zdpt2t |
N/A |
| Character search bar, filter button, latest menu container layer 2 | .css-1cdqd3a |
.profile-filters-flex-outer |
| Character search bar, filter button, latest menu flex container (aligns the 3 items) | .css-mcoi9a |
.profile-filters-flex-inner |
| Character search bar main container | .css-1jy826p |
.profile-filters-flex-inner-hassearchfilter |
| Character search bar container layer 2 | .css-1jy826p>.css-1y0e7gb |
.profile-character-search-input-group |
| Character search bar input | .css-3rot3 |
.pp-fl-search-input or .profile-character-search-input |
| Tag filters button main container | .css-1n2in4t |
.pp-fl-filter-button or .profile-filter-button |
| Tag filters icon | .css-1n2in4t svg |
.pp-fl-filter-button svg or .profile-filter-button svg |
| Latest filtering menu main container | .css-1i3ggec |
.profile-filters-flex-inner-onorderchanged |
| Latest filtering menu container layer 2 | .css-b62m3t-container |
.transparent |
| Latest filtering menu button background container | .transparent .react-select__control |
|
| Latest filtering menu selected filter text container | .transparent .react-select__value-container |
|
| Latest filtering menu selected filter text | .transparent .react-select__value-container>div |
|
| Latest filtering menu down arrow outer container | .css-1wy0on6 |
|
| Latest filtering menu line separator (between 'Latest' and the down arrow) | .css-1wy0on6 span |
|
| Latest filtering menu down arrow inner container | .transparent .react-select__dropdown-indicator |
|
| Latest filtering menu down arrow | .css-8mmkcg or .transparent .react-select__dropdown-indicator svg |
|
| Character page sub-container 2 (contains bot card grid) | .css-2n7zf2>div>div:nth-child(2) |
.pp-cc-list-container |
| Character page sub-container 3 (contains page counter / character page footer) | .css-2n7zf2>div>div:nth-child(3) or .css-1pfxi6a SHARED ID WITH NUMBER OF CHARACTERS |
.profile-pagination-flex-outer |
| Page arrows and page number flex container | .css-1igwmid |
.profile-pagination-prev-hstack |
| '<' Page arrow container | .css-1gpctw1:nth-of-type(1) |
.pp-pg-prev-button or .profile-pagination-prev-button |
| '<' Page arrow | .css-1gpctw1:nth-of-type(1) svg |
.pp-pg-prev-button svg or .profile-pagination-prev-button svg |
| Page number container | .css-1bejyq4 |
.profile-pagination-flex-inner |
| Page number | .css-1bejyq4>div |
.pp-pg-page-button |
| Active Page Number | N/A | .pp-pg-page-button-active .profile-pagination-page-button-active |
| '>' Page arrow container | .css-1gpctw1:nth-of-type(2) |
.pp-pg-next-button or .profile-pagination-next-button-icon |
| '>' Page arrow | .css-1gpctw1:nth-of-type(2) svg |
.pp-pg-next-button svg or .profile-pagination-next-button-icon svg |
Character Filtering Menu (Latest Menu)
| Element | Class ID Selector | Label |
|---|---|---|
| Menu main pop-up container | .transparent .react-select__menu or .css-1nmdiq5-menu |
N/A |
| Menu main background layer | .css-qr46ko |
.react-select__menu-list |
| 'Popular' Menu Option | .css-qr46ko>div:nth-child(1) |
.react-select__option:nth-of-type(1) |
| 'Latest' Menu Option | .css-qr46ko>div:nth-child(2) |
.react-select__option:nth-of-type(2) |
| 'Trending' Menu Option | .css-qr46ko>div:nth-child(3) |
.react-select__option:nth-of-type(3) |
| 'Trending 24h' Menu Option | .css-qr46ko>div:nth-child(4) |
.react-select__option:nth-of-type(4) |
| Selected Menu Option | .transparent .react-select__option--is-selected |
N/A |
| Hovered Menu Option | .transparent .react-select__option:hover |
N/A |
Tag Filter Pop Up Screen
| Element | Class ID Selector | Label |
|---|---|---|
| Main filter pop-up container | .css-16r55pk |
N/A |
| Filter pop-up main flex container (contains sections for the 'Filters' header,'Tags' sub-header, show tags button, X button) | .css-1dljitb FORMERLY .css-14bo29v |
N/A |
| 'Filters' header container | .css-dcyl1x or .css-1dljitb header |
N/A |
| 'X' close button container | .css-lyo4r5 or .css-1dljitb>button:nth-of-type(1) |
N/A |
| 'X' close button icon | .css-lyo4r5 svg or .css-1dljitb>button:nth-of-type(1) svg |
N/A |
| Tags section container | .css-1x51k4p or .css-1dljitb>div:nth-child(3) |
N/A |
| Tags section container layer 2 | .css-18936vg |
.profile-filter-modal-body-flex |
| Tags section container layer 3 (idk what this is here for) | .css-1x51k4p>div>.css-0 |
.profile-filter-modal-body-tags-flex-box |
| 'Tags' header container | .css-1x51k4p h2 or .css-178jenf |
.profile-filter-modal-body-tags-flex-box-heading |
| Tags section container layer 4 (idk what this is here for again) | .css-1x51k4p>div>div>.css-0 |
.profile-filter-modal-body-tags-flex-box>.css-0 |
| Filter tags + buttons main container | ._container_1lgbq_1 |
N/A |
| Filter tags main container | ._tagsContainer_1lgbq_10 |
N/A |
| Collapsed Filter Tags Flex Container | ._collapsedContainerWrapper_1lgbq_78 |
N/A |
| Collapsed Filter Right Gradient | ._gradientRight_1lgbq_36 |
N/A |
| Collapsed Filter Left Gradient | ._gradientLeft_1lgbq_19 |
N/A |
| Collapsed Filter Right Arrow Button | ._navigationButtonRight_1lgbq_138 |
[class*="navigationButton_"] |
| Collapsed Filter Right Arrow Button '>' Icon | ._navigationButtonRight_1lgbq_138 svg |
[class*="navigationButton_"] svg |
| Collapsed Filter Left Arrow Button | ._navigationButtonLeft_1lgbq_129 |
[class*="navigationButton_"] |
| Collapsed Filter Left Arrow Button '<' Icon | ._navigationButtonLeft_1lgbq_129 svg |
[class*="navigationButton_"] svg |
| Expand Filters Button | ._expandButton_1lgbq_153 |
N/A |
| Expand Filters Button Icon | ._expandButton_1lgbq_153 svg |
N/A |
| Filters Flex Container | ._collapsedContainer_1lgbq_78 or ._expanded_1lgbq_14 |
N/A |
| Filter Tag Outer Container | ._motionDiv_1lgbq_142 |
N/A |
| Filter tags flex container | ._container_1fwqk_1 |
N/A |
| Filter tag styling | ._tag_1fwqk_6 or ._collapsedContainer_1lgbq_78 button |
N/A |
User Menu
| Element | Class ID Selector | Label |
|---|---|---|
| Main menu container | .css-mzi0gq |
N/A |
| Menu options container | .css-15hrz07FORMERLY .css-uv5nn8 |
.pp-top-bar-app-menu-list or .profile-top-bar-app-menu-list |
| Empty container parent layer (idk why it was added) | .css-15hrz07>.css-0 |
N/A |
| All menu options | .css-15hrz07 a |
pp-top-bar-app-menu-list-item or .profile-top-bar-app-menu-list a |
| 'Profile' menu option | .css-15hrz07>a:first-child or .css-15hrz07 a:nth-of-type(1) |
.pp-top-bar-app-menu-list-item:nth-of-type(1) |
| 'Profile' menu icon | .css-15hrz07>a:first-child svg or .css-15hrz07 a:nth-of-type(1) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(1) svg |
| 'Create Character' menu option | .css-15hrz07 a:nth-of-type(2) |
.pp-top-bar-app-menu-list-item:nth-of-type(2) |
| 'Create Character' menu icon | .css-15hrz07 a:nth-of-type(2) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(2) svg |
| 'My Characters' menu option | .css-15hrz07 a:nth-of-type(3) |
.pp-top-bar-app-menu-list-item:nth-of-type(3) |
| 'My Characters' menu icon | .css-15hrz07 a:nth-of-type(3) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(3) svg |
| 'Scripts beta' menu option | .css-15hrz07 a:nth-of-type(4) |
.pp-top-bar-app-menu-list-item:nth-of-type(4) |
| 'Scripts beta' menu icon | .css-15hrz07 a:nth-of-type(4) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(4) svg |
| 'My Chats' menu option | .css-15hrz07 a:nth-of-type(5) |
.pp-top-bar-app-menu-list-item:nth-of-type(5) |
| 'My Chats' menu icon | .css-15hrz07 a:nth-of-type(5) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(5) svg |
| 'My Personas' menu option | .css-15hrz07 a:nth-of-type(6) |
.pp-top-bar-app-menu-list-item:nth-of-type(6) |
| 'My Personas' menu icon | .css-15hrz07 a:nth-of-type(6) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(6) svg |
| 'Following' menu option | .css-15hrz07 a:nth-of-type(7) |
.pp-top-bar-app-menu-list-item:nth-of-type(7) |
| 'Following' menu icon | .css-15hrz07 a:nth-of-type(7) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(7) svg |
| 'Blocks' menu option | .css-15hrz07 a:nth-of-type(8) |
.pp-top-bar-app-menu-list-item:nth-of-type(8) |
| 'Blocks' menu icon | .css-15hrz07 a:nth-of-type(8) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(8) svg |
| 'Media Gallery' menu option | .css-15hrz07 a:nth-of-type(9) |
.pp-top-bar-app-menu-list-item:nth-of-type(9) |
| 'Media Gallery' menu icon | .css-15hrz07 a:nth-of-type(9) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(9) svg |
| 'Settings' menu option | .css-15hrz07 a:nth-of-type(10) |
.pp-top-bar-app-menu-list-item:nth-of-type(10) |
| 'Settings' menu icon | .css-15hrz07 a:nth-of-type(10) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(10) svg |
| 'Log Out' menu option | .css-15hrz07 a:last-child or .css-15hrz07 a:nth-of-type(11) |
.pp-top-bar-app-menu-list-item:nth-of-type(11) |
| 'Log Out' menu icon | .css-15hrz07 a:last-child svg or .css-15hrz07 a:nth-of-type(11) svg |
.pp-top-bar-app-menu-list-item:nth-of-type(11) svg |
| All line spacers between menu options | .css-15hrz07 hr (if you'd like to target each one individually, then .css-uv5nn8 hr:nth-of-type(n) where n is 1 - 10 of the lines) |
N/A |
Notifications Menu Pop Up
| Element | Class ID Selector | Label |
|---|---|---|
| Main parent container | ._notificationsPopover_abfem_72 |
[class*="notificationsPopover_"] |
| 'Notifications' title container | ._popoverHeader_abfem_100 |
[class*="popoverHeader_"] |
| 'Notifications' title text | ._popoverTitle_abfem_109 |
[class*="popoverTitle_"] |
| Buttons (Trash, Read All, Close) Flex Container | ._headerActions_abfem_117 |
[class*="headerActions_"] |
| Delete All Container | ._deleteAllButton_abfem_496 |
[class*="deleteAllButton_"] |
| Delete All Trash icon | ._deleteAllButton_abfem_496 svg |
[class*="deleteAllButton_"] svg |
| Read All Container | ._markAllReadButton_abfem_123 |
[class*="markAllReadButton_"] |
| Read All Checkmarks icon | ._markAllReadButton_abfem_123 svg |
[class*="markAllReadButton_"] svg |
| Close Menu Container | ._closeButton_abfem_124 |
[class*="closeButton_"] |
| Close Menu 'X' icon | ._closeButton_abfem_124 svg |
[class*="closeButton_"] svg |
| List of Notifs container | ._notificationsList_abfem_151 |
[class*="notificationsList_"] |
| Notification container | ._notificationItem_k9ox5_2 |
[class*="notificationItem_"] |
| Notif image outer container | ._avatarSection_k9ox5_33 |
N/A |
| Notif image inner container | a._avatarContainer_k9ox5_42 or ._avatarContainer_k9ox5_42 |
N/A |
| Notif bot image | ._characterAvatar_k9ox5_58 |
[class*="notificationItem_"] img:nth-of-type(1) |
| Notif user image | ._userAvatar_k9ox5_65 |
[class*="notificationItem_"] img:nth-of-type(2) |
| Text parent container | ._contentWrapper_k9ox5_85 |
[class*="contentWrapper_"] |
| Text flex container | ._content_k9ox5_85 |
[class*="contentWrapper_"]>div |
| Notif subject line (first line of text) | ._subject_k9ox5_116 |
N/A |
| Notif content text (second line of text) | ._body_k9ox5_132 |
N/A |
| Notif time stamp (third line of text) | ._timestamp_k9ox5_145 |
N/A |
| Delete/Archive Notification button container | ._archiveSection_k9ox5_153 |
[class*="archiveSection_"] |
| Delete/Archive Notification button | ._archiveButton_k9ox5_170 |
[aria-label="Archive notification"] |
| Trash can icon | ._archiveButton_k9ox5_170 svg |
[aria-label="Archive notification"] svg |
| Unread Notification Text Parent Container | ._contentWrapperUnread_k9ox5_102 |
N/A |
| Unread Notification subject line text | ._subjectUnread_k9ox5_125 |
[class*="subjectUnread_"] |
| Unread notification indicator bar | ._unreadIndicator_k9ox5_23 |
[class*="unreadIndicator_"] |
| 'Load More' Button | ._loadMoreButton_abfem_382 |
[class*="loadMoreButton_"] |
Mobile/Small Viewport-Only Elements
little note, some of these selectors are long because the IDs are shared between the desktop header and mobile header. the following selectors I have tried to make mobile-specific. Otherwise another way to target the shared IDs is through a media query for small screens:
Mobile Header
| Element | Class ID Selector | Label |
|---|---|---|
| Header parent container | .css-1n2ma9q |
N/A |
| Main container | .css-18eafy0 FORMERLY .css-bqd4p6 |
.pp-top-bar or .profile-top-bar Note: these labels are shared with desktop |
| 'Back' button section container | .css-13qw20c |
N/A |
| 'Back' button container | .css-1v7jfo7 or .css-13qw20c>button |
.pp-top-bar-back-button or .profile-top-bar-back-button |
| '<' icon | .css-1dwr89y or .css-13qw20c>button span or .css-13qw20c>button svg |
.pp-top-bar-back-button svg |
| 'Back' text | .css-1rokoft or .css-13qw20c>button p |
.pp-top-bar-back-button p |
| 'janitorai' section container | .css-1nsonir |
N/A |
| 'janitorai' section inner container (this hides text overflow) | .css-1o4wo1x or .css-1nsonir>div |
N/A |
| 'janitorai' text | .css-16g2f4q or .css-1nsonir p |
.pp-top-bar-title or .profile-top-bar-title |
| Announcement/Notification button section container | .css-7f563p |
N/A |
Mobile Footer Menu
| Element | Class ID Selector | Label |
|---|---|---|
| Main footer container | .css-1qf4tpw |
N/A |
| Links/Icon container | .css-avv0po |
.pp-mnb-container |
| All links (excluding user menu) | .css-avv0po a |
.pp-mnb-container a |
| All link containers (excluding user menu) | .css-1l8kxqv |
.pp-mnb-item |
| All icons (excluding user menu) | .css-avv0po svg |
.pp-mnb-container svg |
| Home menu link | .css-avv0po>a:nth-child(1) |
.pp-mnb-container a:nth-of-type(1) |
| Home menu icon (house icon) | .css-avv0po>a:nth-child(1) svg |
.pp-mnb-item:nth-of-type(1) svg |
| Chats menu link | .css-avv0po>a:nth-child(2) |
.pp-mnb-container a:nth-of-type(2) |
| Chats menu icon (chat bubble icon) | .css-avv0po>a:nth-child(2) svg |
.pp-mnb-item:nth-of-type(2) svg |
| Search/Explore menu link | .css-avv0po>a:nth-child(3) |
.pp-mnb-container a:nth-of-type(3) |
| Search/explore menu icon (magnifying glass) | .css-avv0po>a:nth-child(3) svg |
.pp-mnb-item:nth-of-type(3) svg |
| User menu link container | .css-avv0po>div:last-child or .css-dvxtzn |
.pp-mnb-container>div:last-child |
| User menu link flex container | .css-1ib4t17 |
.pp-mnb-user-menu |
| User menu link transformation layer | .css-1u2nttd FORMERLY .css-nhknnx |
.pp-top-bar-app-menu |
| User menu link inner container layer 1 | .css-xl71ch |
.pp-top-bar-app-menu>span |
| User menu link inner container layer 2 (contains transition) | .css-2jhocq |
N/A |
| User menu avatar image container | .css-1vc3px3 or .css-dvxtzn span:nth-of-type(2) |
.pp-top-bar-app-menu span:nth-of-type(2) |
| User menu avatar image | .css-mnkk9b or .css-dvxtzn img |
.pp-mnb-container img |
Miscellaneous Elements
Tooltips (Pop-up Text Boxes)
If you're looking to inspect a specific tooltip through devtools, you can either press F8 to freeze your screen when you have the tooltip on screen to inspect it or, in the devtools console, type:
Then hover over the element you want the tooltip of until the debugger pauses your screen with the tooltip up. Then, in the devtools console, type:
Which will allow you to select and inspect the ID of the tooltip on screen.
some of these are outdated due to the Toast update. Will update these eventually.
| Element | Class ID Selector | Label |
|---|---|---|
| All tooltip text boxes | .css-jdhqy4>div |
N/A |
| Tooltip arrow outer container | .css-jdhqy4 .css-0 |
.chakra-tooltip__arrow-wrapper |
| Tooltip arrow inner container | .css-1ugx2pr needs !important to make changes |
.chakra-tooltip__arrow |
| Followed/Unfollowed green creator pop up (toast) container | .sonner-toast-container |
[data-sonner-toaster] |
| Followed/Unfollowed green creator pop up | .sonner-toast-container li |
.sonner-toast-container [data-sonner-toast][data-type=success] |
| Followed/Unfollowed green checkmark icon | .sonner-toast-container li>div:first-child |
.sonner-toast-container [data-sonner-toast][data-type=success] [data-icon] |
| Followed/Unfollowed green text container | .sonner-toast-container li>div:last-child |
[data-sonner-toast][data-styled=true] [data-content] |
| Followed/Unfollowed green text | .sonner-toast-container li>div:last-child>div |
[data-sonner-toast][data-styled=true] [data-title] |
| Follow/Unfollow tooltip text | .css-1mdyyu3 |
.profile-uc-follow-tooltip |
| 'Block this creator' tooltip parent container | .css-r6z5ec |
N/A |
| 'Block this creator' tooltip inner container | .css-1f9crt2 |
#menu-list-public-profile-block-menu |
| 'Block this creator' tooltip flex container | .css-1izfp9f |
.pp-uc-options-menu-item |
| 'Block this creator' X close button | .css-7halv9 |
.pp-uc-options-menu-item span:first-child |
| 'Block this creator' X close button icon | .css-7halv9 svg |
.pp-uc-options-menu-item span:first-child svg |
| 'Block this creator' text | .css-1izfp9f span:last-child |
.pp-uc-options-menu-item span:last-child |
WIP: unblock popup, unblock button, unblock confirmation, tooltips (more of them...)
Element Changes
Updated: 08/10/25
Previous IDs are listed in order of update from left to right.
| CURRENT ID | PREVIOUS IDs |
|---|---|
.css-14plm5m |
.css-x2gqu0 |
._mentions--singleLine_sl551_1 |
._mentions--singleLine_gae3o_1 |
._mentions__control_sl551_1 |
._mentions__input_gae3o_11 |
._searchInput_1tkkb_1 |
._searchInput_c7epr_1 |
.css-126p26a |
.css-55tioa |
.css-1bmggo3 |
.css-e8xvxi |
._wrapper_13xo6_1 |
._wrapper_1lcdj_1 |
.css-tyeyao |
.css-1cjenuj , .css-anekkm |
.css-151faa7 |
.css-1sybr60, .css-p641ht |
.css-1dljitb |
.css-14bo29v, .css-o1zwct, .css-irb94a |
.css-m9a976 |
.css-1cxauvg, .css-2zp1xp |
.css-15hrz07 |
.css-uv5nn8, .css-19h42zx |
.css-13wmn96 |
.css-1sxhvxh |
Element Label Updates
Provided: 08/12/25
Disabled CSS/HTML Properties on JAI
Here is a list of properties/commands that I have tried and confirmed to be disabled currently:
- <input type="button">
- <input type="checkbox">
- <input type="color">
- <input type="date">
- <input type="datetime-local">
- <input type="email">
- <input type="file">
- <input type="hidden">
- <input type="image">
- <input type="month">
- <input type="number">
- <input type="password">
- <input type="radio">
- <input type="range">
- <input type="reset">
- <input type="search">
- <input type="submit">
- <input type="tel">
- <input type="text">
- <input type="time">
- <input type="url">
- <input type="week">
- <svg>
- <button>
- <label>
- <video src>
- <audio>
- <path>
- <script>
- <textpath>
- URL()
- scrollbar-width
- scrollbar-color
- scrollbar-gutter
- overflow-clip-margin
- scroll-behaviour
- scroll-margin
- scroll-padding
- scroll-snap-align
- scroll-snap-stop
- scroll-snap-type
- details name attribute
- @container
- mask-composite
- variables
- attr(data-text)
Yup that's it for now. Thanks for being here!