CSS from zero: a class can name what is inside

The price is the object. The amount is a piece of it. A descendant selector styles that piece without inventing a class for every word, and without changing every strong on the rest of the page.

The descendant selector is the scope#

The space in .price strong is the descendant combinator. It matches a strong inside a .price, at any depth, and it does not match a strong elsewhere. Specificity is one class plus one element, which beats a bare strong. The padding stays on the price. The weight stays on the inner element. Reaching through two or three levels gets brittle. When the inner piece needs more than one declaration, give it a class and keep the price as the scope.

1. .pricepadding1rem
2. .price strongweight650

.price {
  padding: 1rem;
}

.price strong {
  font-weight: 650;
}

The space means inside#

.price strong matches a strong element that sits inside an element with class="price". It does not match a strong in the footer. font-weight: 650 is a number, the weight of the type. padding: 1rem on .price is the length from lesson 3, still on the outer object.

Put the amount in the label: <p class="price">latte <strong>$4.50</strong></p>. The padding applies to the paragraph. The weight applies to the strong. A strong outside any price keeps the browser's default weight. The selector is the scope.

Stay one level down until you need more#

.price strong em reaches further, and it gets brittle. Style the price, then the elements you actually put inside it. If the amount needs more than a weight, give it a class of its own, .amount, and keep .price .amount as the scope. The class remains the group. The descendant selector is how the group reaches its contents.