color link

[Seth-666]

why can’t a changhe color text the .active ? …
the code is very short and simple made… pls explain me what did i do wrang ? .. plss

https://codepen.io/Seth-666/pen/EZVRmb

[Atelierbram]

Understanding CSS is to understand the following founding principles:

• inheritance
• the cascade
• specificity

When you search for “Specifics on CSS Specificity” on this site you will find essential insights in how specificity works, and also some valuable hints on why to best avoid using id-selectors in CSS.

I forked your pen (using only the relevant parts):

http://codepen.io/atelierbram/pen/dvgyEV

[Seth-666]

thx you , i have search for what you sayed , and now i understand :)

[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 */ 
}

[Author]

Posts