HTML and CSS Reference
In-Depth Information
combined selector, it is the key selector, and all of the individual selectors coming before it
are now prequalifiers.
Spaces Within Selectors
Within the previous combined selector,
.hotdog p.mustard
, there is a space
between the
hotdog
class selector and the paragraph type selector but not
between the paragraph type selector and the
mustard
class selector. The use,
and omission, of spaces makes a large difference in selectors.
Since there isn't a space between the paragraph type selector and the
mustard
class selector that means the selector will only select paragraph elements with the
class of
mustard
. If the paragraph type selector was removed, and the
mus-
tard
class selector had spaces on both sides of it, it would select any element
with the class of
mustard
, not just paragraphs.
The best practice is to not prefix a class selector with a type selector. Generally
we want to select any element with a given class, not just one type of element.
And following this best practice, our new combined selector would be better as
.hotdog .mustard
.
Reading the combined selector from right to left, it is targeting paragraphs with a class at-
tribute value of
mustard
that reside within an element with the class attribute value of
hotdog
.
Different types of selectors can be combined to target any given element on a page. As we
continue to write different combined selectors, we'll see their powers come to life. Before
we do that, though, let's take a look at how combining selectors changes a selector's speci-
ficity weight.
Specificity Within Combined Selectors
When selectors are combined, so are the specificity weights of the individual selectors.
These combined specificity weights can be calculated by counting each different type of
selector within a combined selector.
Looking at our combined selectors from before, the first selector,
.hotdog p
, had both a
class selector and a type selector. Knowing that the point value of a class selector is
0-1-0
and the point value of a type selector is
0-0-1
, the total combined point value would be
0-1-1
, found by adding up each kind of selector.
Search WWH ::
Custom Search