0

In math, order of operations provides a basic outline of what operations take precedence, and provides parentheses as a way to override this order. For example, x + y * z = x + (y * z) but x + y * z != (x + y) * z.

Is there a way to achieve this effect in CSS? Which selectors take priority, and how can I force low-priority ones to take priority?

Vadim Ovchinnikov
  • 13,327
  • 5
  • 62
  • 90
BoxTechy
  • 339
  • 2
  • 6
  • 16
  • afair loading order defines precedence, you can only play with `!important` – Iłya Bursov Aug 08 '17 at 21:58
  • It's unclear to me what you mean by "which selectors take priority". A single complex selector only has one subject at a time. For example the selector E F + G only has one subject: G, and it doesn't matter whether the order is (E F) + G or E (F + G) - it will always match the same G elements in a given page. Is this a duplicate of [Are parentheses allowed in CSS selectors?](https://stackoverflow.com/questions/5478920/are-parentheses-allowed-in-css-selectors), I can't tell. – BoltClock Aug 09 '17 at 06:00

2 Answers2

2

What you are looking for is called Specificity. The linked article explains it very well.

Basically, which selector has precedence is based on how specific that selector is. As a somewhat intuitive example, .red.fruit is more specific than just .fruit since it has two class names. Therefore, in your CSS code, even if the .fruit selector comes after .red.fruit, the more specific one takes precedence.

There is more to it than just having multiple class names, though. As you can imagine, different types of selectors have different levels of precedence. For example, ID selectors are considered extremely specific since only a single element can (well, should) have the given ID. In general, this order goes like this, from most specific to least:

Inline Styles > ID Selectors > Class, attribute, and pseudo-class Selectors > Elements and pseudo-elements

Definitely read the article for more info.

Now, all that said, I think it's worth mentioning that as a good rule of thumb, you should aim to make your selectors as least specific as possible. In other words, try not to use ID Selectors or inline styles where you can avoid it, and use the least number of classnames necessary to select the elements you want.

Following this principle allows your CSS to be more flexible in the long run and easier to read.

Auroratide
  • 2,299
  • 10
  • 15
1

There are various ways of prioritizing the effect of your CSS rules on HTML elements. A few would include more specific selectors, as shown below:

section { background-color: red; }

section.header { background-color: green; }

In the example above, the section with a class of header takes precedence because you are including a more specific selector.

Other considerations would be how you're pulling in your css stylesheets (inline, embedded and external).

In this particular case, elements that contain inline CSS rules will take precedence over embedded CSS rules, which will take precedence over rules applied via an external stylesheet.

Given these factors and considerations, you should be able to come up with several different ways of prioritizing certain rules over others.

Read more here: What is the order of precedence for CSS?

eulloa
  • 242
  • 2
  • 8