CSS Style for Links Pointing to The Current Page

CSS style for links pointing to the current page?

you can use CSS3 attribute selectors for this.

a[href='your url'] { *** }

Change link color of the current page with CSS

a:active : when you click on the link and hold it (active!).

a:visited : when the link has already been visited.

If you want the link corresponding to the current page to be highlighted, you can define some specific style to the link -

.currentLink {
color: #640200;
background-color: #000000;

Add this new class only to the corresponding li (link), either on server-side or on client-side (using JavaScript).

How to apply CSS style for the current page link

Here's a demo

first, you need to "ID the body" for every page, giving it a distinction what page you are at.

//when at home page

<body id="home"> //or services or contact
<ul id="navigation">
<li class="home">
<a> and so on...
<li class="services">
<a> and so on...

then, you need to add classes for the "current" pages.

//if literally spoken, it's "when at 'this' page, style the link with 'this' class"

#home .home, //style the home link as "current" when body ID is "home"
#services .services, //style services link as "current" when body ID is "services"
#contact .contact { //style contact link as "current" when body ID is "contact"
//styles when current

Google Chrome clears CSS styles for current page when opening link in new tab or opening a new window

This issue was fixed by Google developers and will be merged to the stable channel soon already merged into Version 53.0.2785.143 m (64-bit).


css selector for link you are at

There isn't a specific CSS selector for the same/current page. But there are other options to select a link pointing to a specific page/anchor (although probably you'd be looking for the ^= attribute selector). You could do something like:

  • a[href="default.aspx"] (considering that you are at default.aspx).

    This will select all the links (a tags) which href value is exactly default.aspx. That includes only links of the type: <a href="default.aspx">...</a>

    • Pros: Specific.
    • Cons: Really specific; It will only select the anchors with that exact text in the href, and not things like default.aspx#something.
  • a[href^="default.aspx"] (considering that you are at default.aspx).

    This will select all the links which href value starts with default.aspx. That includes links of the types: <a href="default.aspx">...</a>, <a href="default.aspx?somekey=somevalue">...</a>, <a href="default.aspx#something">...</a>, etc.

    • Pros: It covers multiple cases.
    • Cons: It excludes multiple cases too (for example, it won't select links of the type http://mysite/default.aspx even when they are the type that you want).
  • a[href*="default.aspx"] (considering that you are at default.aspx)

    This will select all the links which href contains the string default.aspx (it doesn't matter in which position). That includes links like <a href="default.aspx">...</a>, <a href="http://mysite/default.aspx">...</a>, <a href="https://mysite/default.aspx?key=value">...</a>, etc.

    • Pros: It is the most generic that you can use, will select everything containing the page name.
    • Cons: It is too generic and may select links that you don't want (eg: <a href="page2.aspx?source=default.aspx">...</a> will be selected too even when it's not pointing to the same page where the link is).
  • a[href^="#"]

    This will select the links pointing to an anchor within the page (the href value starts with #). As the anchor is within the same page, you don't need to specify the file name. That includes links like this: <a href="#something">...</a>.

    • Pros: It only selects links to anchors within the page.
    • Cons: It only selects links to anchors within the page.

Taking into account how specific the first selector is, and how general the third selector is, I would go with a combination of the second and fourth selectors:

a[href^="#"] {
// styles to highlight links to self

And still this solution would be really specific for default.aspx (links to default.aspx from other pages would be highlighted too). One alternative would be to use a class specific for each page in the selector. For example, if default.aspx has the class .default, and page1 has the class .page1, etc:

.default a[href^="default.aspx"], 
.page1 a[href=^="page1.aspx"],
a[href^="#"] {
// styles to highlight links to self

Changing CSS for link of current page with jQuery

window.location.href will get your current URL. Then you need to use a jQuery selector that finds the <span class="main-nav-item"> child of the <a class="main-nav-link"> element with that href attribute. Apply your class "current" to that element, and you should be good to go. So how about this JavaScript:

// Get the current URL
var currentUrl = window.location.href;

// Get the span you want with a combination class and attribute and child jQuery selector
var currentMenuItem = $(".main-nav-link[href='" + currentUrl + "'] > .main-nav-item");

// Then add your class

Put that in your script tags and give it a try.

Once you have it working, make sure you add the proper CSS rules. For example, add a rule that loads a different background image for #nav-content.current (and another all the rest).

(A note about your current CSS: It looks like you're overqualifying your selectors. If you don't have to worry about .main-nav-items anywhere else on the page, don't bother qualifying that class with the .main-nav before it. And your id selectors (e.g. #nav-content) certainly don't need to be qualified, since they're unique identifiers.)

Hope that makes sense to you and helps.

How to change styling of a link which is leads to the page that is currently open? CSS HTML Bootrap Pinegrow

the pseudo selector :local-link should do the trick BUT it doesn’t seem to be supported in Chrome (and possibly other major browsers): :local-link - CSS: Cascading Style Sheets | MDN

Can do this with JavaScript code, for example, by adding a special class to all local links and then using that class in the selector:

// add to the end of the document
var links = document.querySelectorAll('a[href]');
var page_url = window.location.href.split(/[\?\#]/)[0];
for(var i = 0; i < links.length; i++) {
if(links[i].href.startsWith(page_url)) {

a.local-link { ... }

How do I highlight a link based on the current page?

It's a server-side thing -- when rendering the page, add a class like "current-page" to the link. Then you can style it separately from the other links.

For example, StackOverflow renders the links with class="youarehere" when it points to the page you're already on.

Related Topics

Leave a reply