Question

I have this structure

<nav>
  <ul id="nav" class="sf-menu sf-navbar sf-js-enabled sf-shadow">
  <li id="level1-home" class="current sfHover sf-breadcrumb">
     <a href="/Admin/Home/Index">
  ...

And I’d like to style the <a> tags without affecting any other links in the site. What’s the best way to do this?

Answer 1

Targeting by ID

In your provided code you have an id of “nav” on your ul element. This can be used to specify the container of the anchors you’d like to target:

#nav a {
  color: orange;
}

This will affect all a elements within (regardless of nested depth) an element that has the id of “nav”.

Targeting by Unique Path

Examine the parents of your links for uniqueness. Links that fall within a nav element, within a header element can be styles like this:

header nav a {
  color: red;
}

Links that fall within a nav contained within a footer could be addressed like this:

footer nav a {
  color: green;
}

Disclaimer

The header, footer, and nav tags are all HTML5 constructs. To broad support across older browsers, be sure to include the HTML5Shiv when working with these tags.