How to always keep the Quick Launch link which referecne the site Home Page in BOLD

Question

I am working on sharepoint 2013 on-premise. Now currently i have the following behavioure inside the Quick Launch links :-

1. When i first visit a root site or a sub-site, the Quick Launch link which reference the Home page will be in BOLD color.

2. If i click let say on the Document library link.

3. Then the link which reference the Document library will get BOLD.

4. and so on.

Now we are working on a project, and we want to always keep the link which reference the Home page in BOLD, so users can clearly know which site they are in.. so in the above scenario if they click on the "Document Library" then both the "Home Page" link and the "Document Library" link will be in BOLD... so is this possible ?

Answer 1

Open de DOM structure in F12 developer tools and see what selectors you can use for CSS.

You want the first LI child in the QuickLaunch

All sorts of CSS selectors to get there, like:
provided the Home link is the first, otherwise your targeting will be different CSS (hint: select on href)

[id*='QuickLaunchMenu'] > ul > li:nth-child(1) {
    font-weight: bold;
    background: pink;
}

Note that the text color is on a child element, so can't be set by the LI element, you will have to extend the CSS selector to drill down deeper to the span