Geek Answers Handbook

Understanding the specifics: achieving the desired selection results without using! Important

I am trying to understand the specifics in CSS.

My real understanding is that the specifics are very similar to inheritance, but definitely definitely defined.

Defining Mozilla Specifications :

Specificity is the way in which browsers determine which CSS property values ​​are most important to an element and therefore will be applied. The specifics are based on matching rules, which consist of different types of CSS selectors.

Current task:

Refactoring CSS declarations for .active aand .copyrightso that a rule can be removed !important.

CSS

.main li a {
  color: #7ab2c1;
}
.active a {
  color: #826c55 !important;
}
.primary p {
  font-size: 12px;
}
.copyright {
  font-size: 10px !important;
}

And the corresponding HTML :

<nav class="main">
  <ul class="group">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

[...]

<footer class="primary">
      <p><a href="#">Sign up</a> for our newsletter, it a racket!</p>
      <p class="copyright">Copyright &copy; Sven Snowshoe Emporium. All Rights Reserved.</p>
</footer>

- , ?

+4
4

10. 1.

, :

  • .main li a 12.
  • .active a 11

, , .

:

  • .primary p 11.
  • .copyright 10.

, , , .

!important > . , .active a .copyright .

!important, , , .

An ID 100. , .

:

.main li a      { color: #7ab2c1; }  /* previous winner; specificity 12 */
.main .active a { color: #ff0000; }  /* added class selector; specificity now 21 */
.primary p      { font-size: 12px; } /* previous winner; specificity 11 */
#copyright      { font-size: 8px;} /* switched to ID selector; specificity now 100 */
<nav class="main">
  <ul class="group">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<footer class="primary">
  <p><a href="#">Sign up</a> for our newsletter, it a racket!</p>
  <p id="copyright">Copyright &copy; Sven Snowshoe Emporium.
                    All Rights Reserved.</p>
</footer>
Hide result

:

+2

.copyright , :

.primary .copyright

p.copyright

, , , , .

  • CSS - , CSS
  • ,
  • html body section p.special.selected:hover , p
  • Etc.

, "" . , . CSS, .

+1

, , , . , .

.main li a {
  color: #7ab2c1;
}
.active a {
  color: #826c55 !important;
}

.main li a : li main Name. ? ,

.main a {
  color: #7ab2c1;
}

, - .active, ( + ). nav a a , , ( ) .

.

.primary p {
  font-size: 12px;
}
.copyright {
  font-size: 10px !important;
}

?

p {
  font-size: 12px;
}

.copyright ( p font-size 12px , ).

:

.primary {
  font-size: 12px;
}

font-size .

, , , , . , , , , .

+1

html- , , !important trumps all.

.main li a 1 + 2 html-, .active a 1 + 1 html-. , , !important .

!important, : a) .main li a b) .active a. a .main a. , .active a, - CSS , , , !important.

- .primary p 1 + 1 html-, .copyright - 1 . b .primary .copyright. 2 , 1 + 1 html, !important.

CSS:

.main a {
  color: #7ab2c1;
}
.active a {
  color: #826c55;
}
.primary p {
  font-size: 12px;
}
.primary .copyright {
  font-size: 10px;
}
+1

More articles:


All Articles