How does the CSS specificity work? [duplicate]

by

The first says that any an item with class c inside of any item with of class a will be colored red.

.a .c {
    color: red;
}

The second says that any an item with class c inside of any item of class b will be colored green. It takes precedence over the first rule as it is just as deep as the first rule, but defined after that rule.

.b .c {
    color: green;
}

This says that any item with the class c should be blue. But since it is not as descriptive as the rules above, it does not take precedence. If you have an item with class c that is not nested inside a class a or b, then this rule will take effect.

.c {
    color: blue;
}

So there are two rules to remember:

  • The more specific rules get higher precedence
  • The later defined rules get higher precedence than their just-as-specific counterparts.

More Related Contents:

  1. What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?
  2. CSS selector for first element with class
  3. Text in a flex container doesn’t wrap in IE11
  4. Does the order of classes listed on an item affect the CSS?
  5. Customizing Bootstrap CSS template
  6. What is WebKit and how is it related to CSS?
  7. CSS styling in Django forms
  8. How to add a color overlay to a background image? [duplicate]
  9. Center a ‘div’ vertically in a % height ‘div’
  10. Common CSS Media Queries Break Points [duplicate]
  11. Single huge .css file vs. multiple smaller specific .css files? [closed]
  12. Select all child elements recursively in CSS
  13. How to validate vendor prefixes in CSS like -webkit- and -moz-?
  14. Why doesn’t the selector h3:nth-child(1):contains(‘a’) work?
  15. How to display a reverse-ordered list in HTML?
  16. CSS div element – how to show horizontal scroll bars only?
  17. Can you use if/else conditions in CSS?
  18. How can I remove space (margin) above HTML header?
  19. How do I center an SVG in a div?
  20. DIV’s vs. Tables or CSS vs. Being Stupid
  21. Two-tone background split by diagonal line using css
  22. Prevent that a fixed element resizes when zooming on touchscreen
  23. How do I stop Chrome from yellowing my site’s input boxes?
  24. Can type selectors be repeated to increase specificity?
  25. The use of /deep/ and >>> in Angular 2
  26. Need to remove href values when printing in Chrome
  27. Hide Up & Down Arrow Buttons (Spinner) in Input Number – Firefox 29
  28. CSS class naming convention
  29. Expanding the parent container with 100% height to account for floated content
  30. text overflow ellipsis: avoid word break

Leave a Comment