title: How to style a link that matches the current URL?
body: <p>I'd like to add a CSS background color to any link in the sidebar navigation (#subnav) that matches the current URL exactly. </p>
  
  <p>I've tried <code>div#subnav a:active { background: #f1f2f2; }</code>, but it didn't work.</p>
  
  <p>Any help would be appreciated!</p>
  
  <p>UPDATE:
  The code for the subnav is as follows:</p>
  
  <pre><code>&lt;!-- START ALL PRODUCTS SUBNAV --&gt;
  {% if collection.handle == 'all' %}
  &lt;div id="back_link"&gt;&lt;a style="background: none; color: #fff;" href="/collections/all"&gt;.&lt;/a&gt;&lt;/div&gt;
  &lt;div id="subnav" style="margin-top: -33px;"&gt;{% if linklists.sub-navigation.links.size &gt; 0 %}{% for link in linklists.sub-navigation.links %}
  &lt;li class="main_category_link"&gt;&lt;a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}&gt;{{ link.title | escape }}&lt;/a&gt;&lt;/li&gt;{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
  {% endif %}
  &lt;/div&gt;
  {% endif %}
  &lt;!-- END ALL PRODUCTS SUBNAV --&gt;
  
  &lt;!-- START HOME SUBNAV --&gt;
  {% if collection.handle == 'home' %}
  &lt;div id="back_link"&gt;&lt;a href="#" onclick="history.go(-1);return false;"&gt;&amp;larr; BACK&lt;/a&gt;&lt;/div&gt;
  
  &lt;div id="subnav"&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/home"&gt;HOME&lt;/a&gt;&lt;/div&gt;
  {% if linklists.sub-navigation-home.links.size &gt; 0 %}
  {% for link in linklists.sub-navigation-home.links %}
  &lt;li&gt;&lt;a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}&gt;{{ link.title | escape }}&lt;/a&gt;&lt;/li&gt;{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
  {% endif %}
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/children"&gt;CHILDREN&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/women"&gt;WOMEN&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/pets"&gt;PETS&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/gifts"&gt;GIFTS&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a style="margin-bottom: 0;"href="/collections/sale"&gt;SALE&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  {% endif %}
  &lt;!-- END HOME SUBNAV --&gt;
  
  &lt;!-- START CHILDREN SUBNAV --&gt;
  {% if collection.handle == 'children' %}
  &lt;div id="back_link"&gt;&lt;a href="#" onclick="history.go(-1);return false;"&gt;&amp;larr; BACK&lt;/a&gt;&lt;/div&gt;
  &lt;div id="subnav"&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/home"&gt;HOME&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/children"&gt;CHILDREN&lt;/a&gt;&lt;/div&gt;
  {% if linklists.sub-navigation-children.links.size &gt; 0 %}{% for link in linklists.sub-navigation-children.links %}
  &lt;li&gt;&lt;a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}&gt;{{ link.title | escape }}&lt;/a&gt;&lt;/li&gt;{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
  {% endif %}
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/women"&gt;WOMEN&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/pets"&gt;PETS&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/gifts"&gt;GIFTS&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a style="margin-bottom: 0;" href="/collections/sale"&gt;SALE&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  {% endif %}
  &lt;!-- END CHILDREN SUBNAV --&gt;
  
  &lt;!-- START WOMEN SUBNAV --&gt;
  {% if collection.handle == 'women' %}
  &lt;div id="back_link"&gt;&lt;a href="#" onclick="history.go(-1);return false;"&gt;&amp;larr; BACK&lt;/a&gt;&lt;/div&gt;
  &lt;div id="subnav"&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/home"&gt;HOME&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/children"&gt;CHILDREN&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/women"&gt;WOMEN&lt;/a&gt;&lt;/div&gt;
  {% if linklists.sub-navigation-women.links.size &gt; 0 %}{% for link in linklists.sub-navigation-women.links %}
  &lt;li&gt;&lt;a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}&gt;{{ link.title | escape }}&lt;/a&gt;&lt;/li&gt;{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
  {% endif %}
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/pets"&gt;PETS&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/gifts"&gt;GIFTS&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a style="margin-bottom: 0;" href="/collections/sale"&gt;SALE&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  {% endif %}
  &lt;!-- END WOMEN SUBNAV --&gt;
  
  &lt;!-- START PETS SUBNAV --&gt;
  {% if collection.handle == 'pets' %}
  &lt;div id="back_link"&gt;&lt;a href="#" onclick="history.go(-1);return false;"&gt;&amp;larr; BACK&lt;/a&gt;&lt;/div&gt;
  &lt;div id="subnav"&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/home"&gt;HOME&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/children"&gt;CHILDREN&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/women"&gt;WOMEN&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/pets"&gt;PETS&lt;/a&gt;&lt;/div&gt;
  {% if linklists.sub-navigation-pets.links.size &gt; 0 %}{% for link in linklists.sub-navigation-pets.links %}
  &lt;li&gt;&lt;a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}&gt;{{ link.title | escape }}&lt;/a&gt;&lt;/li&gt;{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
  {% endif %}
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/gifts"&gt;GIFTS&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a style="margin-bottom: 0;" href="/collections/sale"&gt;SALE&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  {% endif %}
  &lt;!-- END PETS SUBNAV --&gt;
  
  &lt;!-- START GIFTS SUBNAV --&gt;
  {% if collection.handle == 'gifts' %}
  &lt;div id="back_link"&gt;&lt;a href="#" onclick="history.go(-1);return false;"&gt;&amp;larr; BACK&lt;/a&gt;&lt;/div&gt;
  &lt;div id="subnav"&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/home"&gt;HOME&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/children"&gt;CHILDREN&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/women"&gt;WOMEN&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/pets"&gt;PETS&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/gifts"&gt;GIFTS&lt;/a&gt;&lt;/div&gt;
  {% if linklists.sub-navigation-gifts.links.size &gt; 0 %}{% for link in linklists.sub-navigation-gifts.links %}
  &lt;li&gt;&lt;a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}&gt;{{ link.title | escape }}&lt;/a&gt;&lt;/li&gt;{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
  {% endif %}
  &lt;div class="main_category_link"&gt;&lt;a style="margin-bottom: 0;" href="/collections/sale"&gt;SALE&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  {% endif %}
  &lt;!-- END GIFTS SUBNAV --&gt;
  
  &lt;!-- START SALE SUBNAV --&gt;
  {% if collection.handle == 'sale' %}
  &lt;div id="back_link"&gt;&lt;a href="#" onclick="history.go(-1);return false;"&gt;&amp;larr; BACK&lt;/a&gt;&lt;/div&gt;
  &lt;div id="subnav"&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/home"&gt;HOME&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/children"&gt;CHILDREN&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/women"&gt;WOMEN&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/pets"&gt;PETS&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a href="/collections/gifts"&gt;GIFTS&lt;/a&gt;&lt;/div&gt;
  &lt;div class="main_category_link"&gt;&lt;a style="margin-bottom: 0;" href="/collections/sale"&gt;SALE&lt;/a&gt;&lt;/div&gt;
  {% if linklists.sub-navigation-sale.links.size &gt; 0 %}{% for link in linklists.sub-navigation-sale.links %}
  &lt;li&gt;&lt;a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}&gt;{{ link.title | escape }}&lt;/a&gt;&lt;/li&gt;{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
  {% endif %}
  &lt;/div&gt;
  {% endif %}
  &lt;!-- END SALE SUBNAV --&gt;
  </code></pre>