CSS - Compound Selector

What is the point of compound selectors? I mean, if you take as an example the following code

p.myClass {
  font-size: 1.5rem;

This is supposed to select a paragraph with a class of myClass. So, why not select the class directly or use a relative selector instead? It seems like an overcomplicated way of selecting an element.

The primary directive in designing a markup/styling schema is to avoid rigidity, and seek flexibility. Designers should not have so many constraints it saps them of their creative juices.

The basic difference above is quite simple:

.myClass  => ruleset will apply to any element TYPE with that class attribute
p.myClass => ruleset will apply only to P element with that class attribute

We might have several element types that our class ruleset will apply to, but we may also wish to extend or override those styles on P nodes, specifically.


.myClass {
  border: 1px solid gray;
  color: dark-gray;
  /* other properties/values */
p.myClass {
  border: 1px dashed light-gray;
  color: black;

Above we simply override the main ruleset on two specific properties and allow all the others that apply.

Bottom line, we are not after hard and fast (rigid) but relaxed and flexible which opens the floodgates of creativity and gives designers a wide range of options and possibilities. Make it a rule to NOT try to write things in stone. It will only work against you.

My question is, why we just don’t use .myClass p? I mean, to me it is way easier and simpler to understand the syntax by doing it that way than overcomplicating the selector using these types of selectors.

The only one who is overcomplicating things is you by trying to force a square peg into a round hole, so to speak. The difference is great between p.class and .class p to a profound degree, even while their specificity is identical.

‘Easier’ and ‘simpler’ are subjective terms in this regard, and you do yourself no big favors by trying to invent hardline rules. Free yourself of that notion and relish in the fact that you have so much leeway.

None of this is made more obvious than when we revert to default styles, as in, no style sheet on our end. We let the browser choose the styles and render each type according to the basic outline model. I’ve said this many times over the years, learn HTML without CSS before learning CSS. When learning CSS, learn how to relate it to the default styles for every element type. I’ve yet to see a learner adopt this approach and so remain disappointed by the type of questions we see on the forums. There is indeed a magic bullet, but none so far have discovered it; ergo, the disappointment.

My apologies. I posted my reply after a very long day. What you first replied makes sense. The only BUT that I would like to add is the fact that, as far as I know, we should try to avoid overcomplicated selectors that slows down browser performance and decreases readability. In this specific case, it is not overcomplicated, but you know you can make selectors as complicated as you want. if I can avoid 5 min of brain power to both the developer and the browser by simply creating a new class or ID that selects an element I probably will. Again, thanks for your replies.

1 Like