Okay, this isn’t the usual kind of thing for me to write a blog post about but it is something I experienced recently while I was a moderator over at /r/thelastofusfactions

You don’t need to be an experienced web developer to do the development part of subreddit moderation, but even if you are, the limitations enforced by reddit could end up teaching you a thing or two.

HTML

Firstly, you have hardly any control over the markup. You can forget divs, classes, and ids. Any markup you add has to be done using markdown and it has to be placed into the sidebar, post, comment or a wiki page.

This means you are going to have to get creative with the way you target elements with CSS.

Targeting

Here are some handy ways of targeting elements that you might not use often when working without these restrictions:

:nth-child()

This one is fairly common actually. The nth-child selector allows you to target an element based on it’s position within it’s parent element. For example you could target any “2nd child” paragraph tags within the sidebar using:

.side p:nth-child(2) {  color: tomato;}

It’s important to remember that all this is saying is: target any p tag anywhere within the .side region that is considered to be a “2nd child” – not just ones immediately within the .side area.

In order to target only the elements immediately within a certain parent element you need to use the element>element selector

.side > p:nth-child(2) {  color: tomato;}

Documentation

See also:

:nth-of-type()

:first-child

:last-child

[attribute=value]

I had barely used this one before but it is really commonly used in subredit styling. You can essentially target any element based on the value of any inline attributes it might have, the most common one used being href. For example:

a[href="http://www.twitter.com"] {  color: cyan;}

An even more common example uses one of the more specific versions of attribute-based targeting, listed below, to target any user link that ends with a certain string (notice the $ sign), in this case a username.

.author[href$="FreddyBushBoy"] {  color: goldenrod;}

This can be used to add extra styles to specific users – moderators, prize winners, trolls – whatever.

Documentation

See also:

[attribute^=value] (attribute value begins with)

[attribute$=value] (attribute value ends with)

[attribute*=value] (attribute value contains)

Pseudo elements

Pseudo elements (:before and :after) are a big deal here. With the limitation of not being able to change most of the actual markup of your sub, you can at least add content to these pseudo elements:

.users-online .number:after {  content: " are impressed with my use of pseudo selectors";}

This code here allows us to add text to an area of our site we would be otherwise be unable to – the users online area.

Pseudo elements can also just have their content declared as “” to be used for general styling – a background image for example.

CSS

CSS is your best friend, your only reliable ally here. You are allowed to do pretty much anything with CSS you can do anywhere else, save for a couple of disallowed properties.

Javascript

Nope , none of this.

Images

No gifs either

There is however another way to add sprite-based animation – I have written about this technique in the past, albeit not with a reddit focus.

Another quick tip with images that not everyone knows is that you can actually add inline images to wiki pages using markdown image tags:

![](%%image_name%%)

Note that you must upload it with the rest of your images for your stylesheet and use the image placeholder name. Careful not to over use this as your sub has a max allowed number of uploaded images of 50.

Get creative, browse, and steal

The main thing to take away from this is that, even with the limitations, there is still a lot of ways to get things done, you just have to use the remaining tools you have left creatively.

Failing that you can always browse other subs and check out what they are doing. You can grab the stylesheet of many subreddits by typing /stylesheet after the subreddit name in the address bar.