How to style a link that matches the current URL? [duplicate]

Question

I'd like to add a CSS background color to any link in the sidebar navigation (#subnav) that matches the current URL exactly.

I've tried div#subnav a:active { background: #f1f2f2; }, but it didn't work.

Any help would be appreciated!

UPDATE: The code for the subnav is as follows:

<!-- START ALL PRODUCTS SUBNAV -->
{% if collection.handle == 'all' %}
<div id="back_link"><a style="background: none; color: #fff;" href="/collections/all">.</a></div>
<div id="subnav" style="margin-top: -33px;">{% if linklists.sub-navigation.links.size > 0 %}{% for link in linklists.sub-navigation.links %}
<li class="main_category_link"><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
</div>
{% endif %}
<!-- END ALL PRODUCTS SUBNAV -->

<!-- START HOME SUBNAV -->
{% if collection.handle == 'home' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>

<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
{% if linklists.sub-navigation-home.links.size > 0 %}
{% for link in linklists.sub-navigation-home.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
<div class="main_category_link"><a style="margin-bottom: 0;"href="/collections/sale">SALE</a></div>
</div>
{% endif %}
<!-- END HOME SUBNAV -->

<!-- START CHILDREN SUBNAV -->
{% if collection.handle == 'children' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>
<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
{% if linklists.sub-navigation-children.links.size > 0 %}{% for link in linklists.sub-navigation-children.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
<div class="main_category_link"><a style="margin-bottom: 0;" href="/collections/sale">SALE</a></div>
</div>
{% endif %}
<!-- END CHILDREN SUBNAV -->

<!-- START WOMEN SUBNAV -->
{% if collection.handle == 'women' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>
<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
{% if linklists.sub-navigation-women.links.size > 0 %}{% for link in linklists.sub-navigation-women.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
<div class="main_category_link"><a style="margin-bottom: 0;" href="/collections/sale">SALE</a></div>
</div>
{% endif %}
<!-- END WOMEN SUBNAV -->

<!-- START PETS SUBNAV -->
{% if collection.handle == 'pets' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>
<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
{% if linklists.sub-navigation-pets.links.size > 0 %}{% for link in linklists.sub-navigation-pets.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
<div class="main_category_link"><a style="margin-bottom: 0;" href="/collections/sale">SALE</a></div>
</div>
{% endif %}
<!-- END PETS SUBNAV -->

<!-- START GIFTS SUBNAV -->
{% if collection.handle == 'gifts' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>
<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
{% if linklists.sub-navigation-gifts.links.size > 0 %}{% for link in linklists.sub-navigation-gifts.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
<div class="main_category_link"><a style="margin-bottom: 0;" href="/collections/sale">SALE</a></div>
</div>
{% endif %}
<!-- END GIFTS SUBNAV -->

<!-- START SALE SUBNAV -->
{% if collection.handle == 'sale' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>
<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
<div class="main_category_link"><a style="margin-bottom: 0;" href="/collections/sale">SALE</a></div>
{% if linklists.sub-navigation-sale.links.size > 0 %}{% for link in linklists.sub-navigation-sale.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
</div>
{% endif %}
<!-- END SALE SUBNAV -->

Answer 1

The :active property is not what you think it is. On CSS world a link becomes active once you click on it. Of course this takes you to the page it linked to so in reality a link is active for a very short period of time.

There are several approaches you can take to do what you want. Add a class to the link you want to mark as active is the most obvious one:

Your HTML:

<a href="link.html">Link1</a>
<a href="link.html" class="active">Link2</a>
<a href="link.html">Link3</a>

Your CSS:

.active {
    font-weight: bold;
}

This way active link becomes bold. Of course this has to be done server-side.

Check here for other approaches, including one with JavaScript