Mastering CSS

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 ...