Reply To: color link

[Atelierbram]

.nav-primary_menu .active a,
.nav-primary_menu li a:hover {
  outline: 1px dotted salmon; /* this rule works because:
  1. although it is defined earlier in the cascade than the next rule, 
  2. it is more specific than the next rule */ 
}

.nav-primary_menu li a {
  text-decoration: none;
  display: inline-block;
  color: white;
  padding: .5em;
  outline: none; /* see previous rule: this rule has no effect on the active link */
}

.nav-primary_menu .active a,
.nav-primary_menu li a:hover {
  color: teal; /* this rule works because:
  1. it is defined further down in the cascade and 
  2. it is more specific than the previous rule */ 
}

/* more examples on cascade and specificity */
.nav-primary_menu .nav-primary_menu_item {
  background-color: transparent; 
}

.nav-primary_menu li {
  background-color: azure; /* this rule will have no effect because:
  1. althought it is defined further down in the cascade, 
  2. it is less specific than the previous rule */ 
}

.nav-primary_menu .active {
  background-color: azure; /* this rule works because:
  1. it is defined further down in the cascade, 
  2. although it has the same specificity as the previous rule */ 
}