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

Get Mastering CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.