A comprehensive CSS reference can be found
here.
Selectors of interest are as follows (some of which are redundant):
- #chat - the ID entire chat container, comprising .debug and .message elements
- .debug - a class selector for system messages (e.g. loading, connect, disconnect)
- .message - a single chat message, including badges, username, pronouns, etc.
- .badge - a user's associated badges (e.g. moderator, vip, subscriber)
- .pronouns - the pronouns of the user, set at pr.alejo.io
- .username - the username associated with a message
- .separator - the colon and its space following the username
- .user-info - the container of the `.badge`, `.pronouns`, and `.username` elements
- [data-pronoun-primary="sheher"] is a CSS attribute selector to select pronouns with a "sheher" as primary pronouns, there's also `data-pronoun-alternate`, and the pronouns can be any of "aeaer", "any", "eem", "faefaer", "hehim", "itits", "other", "perper", "sheher", "theythem", "vever", "xexem", "ziehir"
- .messageBody - the chat messaged, comprising the emote <img> tags and text nodes
- .emote - any emote, be it any of Twitch, FrankerFaceZ, BetterTTV, or 7TV
- [data-emote-name="commenBoop"] selects emotes that have the name "commenBoop"
- [data-emote-source="twitch"] selects emotes from twitch, possible values are "twitch", "frankerfacez", "betterttv", "7tv", and "emoji"
- [data-emote-type="normal"] selects normal emotes which comprise any emote that is not a modifier emote, possible values are "normal", "modifier"
- .twitchEmote - a Twitch emote
- .ffzEmote - a FrankerFaceZ emote
- .bttvEmote - a BetterTTV emote
- .seventvEmote - a 7TV emote
- .emoji - an emoji, converted by the Twemoji library
- .gigantifiedEmote - an emote gigantified using bits (only Twitch emotes)
- .annoucement - an announcement made with /announce or its ilk
- .modifier - a BetterTTV modifier that hasn't been applied to any emote