Calculating the weight of selectors

A class is worth 10 points, so .secondary-section is worth 10 points. A plain old element such as p or div is worth 1 point. Therefore, the .secondary-section p selector is 11 points. The .secondary-section div figure img selector is 13 points. Let's create another selector below the one worth 13 points and we have .secondary-section img. Then, let's change the border-color to blue:

.secondary-section div figure img { 
   border: 10px solid #333; 
} 
.secondary-section img { 
  border: 10px solid blue; 
}

When we save this, our border is going to remain gray because the point value of our last selector is only 11; it's getting beat out by the previous selector's point value of 13. That's the problem with these long descendant selectors that are longer than they should be, they get weighted heavier:

Following is the output of preceding code:

IDs have a point value of 100 points, which is why I advise against using them. They have so much unnecessary weight to them and drive the specificity level through the roof. Assigning point values kind of sounds like keeping score on a video game, but the difference is you want to try and keep your point value as low as possible on this game. If you do that, you will be able to write less complicated CSS.