tesscodes | How to target & hide entry links

How to target and hide entry links

So you want to hide certain links from your entry footer, huh?

No worries, I can help with that! It's one of those things that's really easy once you know how to do it, but when you're still learning CSS, or you don't really edit it that often, it can be a pretty hard conclusion to arrive at without an assist. This tutorial is a tie-in for the launch of

s2complete, my documentation project for the Complete Style CSS! Let's get started!

First, let's identify the pieces of your linkbar!

Here are the basic classes of your entry linkbar in S2 Complete Style. As you can see, nothing here targets any specific link, but is general styling for the whole area. I've left out the default layout's base CSS since this tutorial isn't about actually styling the entry linkbar, but if you'd like to learn more about that, you can check out the lesson on my S2 Complete Style documentation!



.entry-linkbar{} The container holding your list.


.entry-linkbar ul{} The list holding your list items.


.entry-linkbar li{} All list items in your links list.


li.first-el{} The first list item in your links list.


.entry-linkbar li a{} Each actual link in the linkbar.



.permalink{} **This class is a lie and doesn't actually exist; it won't help you hide your permalink.**

Now let's identify the code that will make this possible!

Using nth-of-type or similar selectors just won't work, as you've probably figured out on your own if you've already tried to do this before. Why doesn't that work? Because it relies on a vague idea of the links rather than specific targeting. It's just picking a number down the line and hiding it, which means your logged-in view of the links list, which has more links in it, will hide different links than it will for someone viewing your account from their own account. Bummer.

But there's a whole slew of CSS selectors available, and there's an easy way around the problem! Today, we're going to be using the [attribute] selector, but I suggest reading up on the W3Schools entry if you have an interest in being able to target specific things to hide or alter them in S2, because there are a lot more possibilities than just what I'm teaching here today.

Let's take a look at the CSS selectors we'll need for this tutorial:

[attribute^=value] ex. a[href^="https"]
Selects every link with an href attribute value that begins with "https". We don't actually need this one, but it goes with the others so I'm including it for your reference.

[attribute$=value] ex. a[href$="html"]
Selects every link element with an href attribute value that ends with "html".

[attribute*=value] ex. a[href*="subscriptions"]
Selects every link element with an href attribute value that generally contains "subscriptions" somewhere in it.

Next, how do we hide some links, but not others?

The key to making this work is finding a unique part of the entry link you want to hide that no other link on the list contains. For example, the Track/Stop Tracking link has the word subscriptions in it, but no other link does. That is what you would target to hide that link and none of the others (you would use the last selector above, as it's in the link, but isn't specifically the start or end of the link.)

Leave a comment link:
.entry-linkbar li a[href*="mode=reply"]{display:none;}

Read comments link:
.entry-linkbar li a[href*="comments"]{display:none;}

Edit link:
.entry-linkbar li a[href*="editjournal"]{display:none;}

Edit tags link:
.entry-linkbar li a[href*="edittags"]{display:none;}

I don't recommend hiding the above links in most cases, but I'm adding them for completion's sake. Below are the links people most commonly want to hide!

Remember link:
.entry-linkbar li a[href*="memadd"]{display:none;}

Tell a friend link:
.entry-linkbar li a[href*="tellafriend"]{display:none;}

Track link:
.entry-linkbar li a[href*="subscriptions"]{display:none;}

Permanent link:
.entry-linkbar li a[href$="html"]{display:none;}

The "Link" link on the entry's linkbar is the trickiest one. It contains nothing unique to it to differentiate it from any of the other links on the list, but it is the only link that ends in html, so this will hide the permalink but none of the other links. Notice that it uses $ and not * like the others.

Technically the links to view and leave comments could use the 'ends in' selector too, but it's not absolutely necessary to do it that way within the confines of the linkbar like it is with the permalink, so I've used the 'contains' selector just to make things a little simpler.

Why yes, you can use this to replace link text!

Instead of declaring display:none; you could easily use this method to style each link with its own image or combine it with the :before selector to replace the text on links that don't give you the option in the general editing with different text. Comment below if you'd like a Part 2 tutorial for these things!

Important things to consider:

Note #1: Don't forgo using the .entry-linkbar li preface for your link targeting or it may have some very unintended effects carried through the whole page. You want to specifically target the links inside the linkbar to hide links inside it. (For example, if you used a[href$="html"]{display:none;} without the class to specify where you want to hide links you would probably accidentally hide most of your links... everywhere.)

Note #2: When using CSS selectors this way to get really specific with targeting elements, I recommend not shortening words. For example, you could shorten subscriptions and tellafriend to subs and tell and it would work for this specific tutorial and likely wouldn't have unintended effects, but it's not a great habit to get into because if you ever use this method for a broader scope, you'll probably wind up hiding things you don't want hidden here and there.

How to target & hide entry links