Back to CSS Inheritance, Cascade, and Specificity page »
1. nav { color: purple; } /* 0-0-1 = 1 */
2. nav.main-nav { color: blue; } /* 0-1-1 = 11 */
3. header nav { color: lime; } /* 0-0-2 = 2 */
4. #navigation nav { color: green; } /* 1-0-1 = 101 */
5. header#navigation nav { color: aqua; } /* 1-0-2 = 102 */
6. .home #navigation nav.main-nav { color: red; } /* 1-2-1 = 121 */
7. body.home header.branding nav.main-nav { color: deeppink; } /* 0-3-3 = 33 */ As we can see, the .home #navigation nav.main-nav selector wins, because it is the most specific. The text color in the nav will be purple.