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).

https://bugs.chromium.org/p/chromium/issues/detail?id=648237#c6

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^="default.aspx"], 
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
currentMenuItem.addClass("current");

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:

<script>
    // 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)) {
            links[i].classList.add('local-link');
        }
    }
</script>

<style>
   a.local-link { ... }
</style>

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.

CSS Style for Links Pointing to The Current Page