2

If I declare in my css file(or inside <style> </style> tags) firstly the id of element and then the classname of the same element, then the id styling will be applied, regardless the fact that classname is the latest one in order.

I want to know why this is happening and if it has some naming, please do tell.

Just to make it more clear, take a look at this example, please:

div {
  height:100px;
  width:150px;
  border:1px solid #000;
  margin:0 auto;
}
#theID {
  background:#090;
}
.theCLASS {
  background:#00F;
}



<div id="theID" class="theCLASS"></div>
laudbob
  • 47
  • 1
  • 6

2 Answers2

2

This is to do with the complicated world of "Specificity"...

ID's are more specific than classes and take precedence over them. This is because ID's have to be UNIQUE on every page...so they are by nature very specific. Classes can appear multiple times.

Learning how this works is fundamental to coding CSS. Some people say you should try to avoid using ID's altogether as they are so specific they tend to cut down reuse.

A rule of thumb might be to use ID's to identify large sections of your page, or important items and classes to attach styles to the other things.

These days with html5 we have <section>, <header> and <footer> whereas we used to use div's for those (with ID's normally) so these days the ID is used less than ever since we can target those things directly.

However consider ID-ing sections: <section id="mainContent"> for example is a fairly standard thing to do.

There are no RULES about how to specifically (excuse the pun) use ID's and classes. Just conventions that have built up over time.

see: https://developer.mozilla.org/en/docs/Web/CSS/Specificity ... here is a section:

The concept

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.

How is it calculated?

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When specificity is equal to any of the multiple declarations, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted element will always take precedence over rules which an element inherits from its ancestor.

mayersdesign
  • 5,062
  • 4
  • 35
  • 47
1

It carries more specificity

CSS applies vastly different specificity weights to classes and IDs. In fact, an ID has infinitely more specificity value! That is, no amount of classes alone can outweigh an ID. CSS Tricks - Specifics on CSS Specificity

Further Reading:

CSS Tricks - The Difference Between ID and Class

MDN - Specificity

Selector Types

The following list of selector types increases by specificity:

  1. Type selectors (e.g., h1) and pseudo-elements (e.g., :before).
  2. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
  3. ID selectors (e.g., #example).
UncaughtTypeError
  • 8,226
  • 4
  • 23
  • 38