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 multiple declarations have equal specificity, 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 elements will always take precedence over rules which an element inherits from its ancestor.
The following list of selector types increases by specificity:
Universal selector (*), combinators (+, >, ~, ' ') and negation pseudo-class (:not()) have no effect on specificity. (The selectors declared inside :not() do, however.)
Inline styles added to an element (e.g., style="font-weight:bold") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
When an important rule is used on a style declaration, this declaration overrides any other declarations. Although technically !important has nothing to do with specificity, it interacts directly with it.
Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.
When two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied.
Some rules of thumb:
The negation pseudo-class :not is not considered a pseudo-class in the specificity calculation. But selectors placed into the negation pseudo-class count as normal selectors when determining the count of selector types.
Specificity is based on the form of a selector. In the following case, the selector *[id="foo"] counts as an attribute selector for the purpose of determining the selector's specificity, even though it selects an ID.
When multiple CSS rules target the same HTML elements, and those CSS rules set some of the same CSS properties, what styles end up being applied to the HTML element? In other words, which CSS rules take precedence?
CSS precedence is an issue that web designers and developers can spend long time fighting with. Understanding CSS precedence definitely makes the fight easier.
When the browser needs to resolve what styles to apply to a given HTML element, it uses a set of CSS precedence rules. Given these rules, the browser can determine what styles to apply. The rules are:
I will explain what these rules mean in the following sections.
Note, that CSS precedence happens at CSS property level. Thus, if two CSS rules target the same HTML element, and the first CSS rule takes precedence over the second, then all CSS properties specified in the first CSS rule takes precedence over the CSS properties declared in the second rule.
However, if the second CSS rule contains CSS properties that are not specified in the first CSS rule, then these are still applied. The CSS rules are combined - not overriding each other.
If you need a certain CSS property to take precedence over all other CSS rules setting the same CSS property for the same HTML elements, you can add the instruction !important after the CSS property when you declare it. The !important instruction has the highest precedence of all precedence factors.
Normally, a CSS rule with CSS class selector has higher specificity than a CSS rule with an element selector, so normally the second CSS rule (.specialText {...} ) would take precedence over the first CSS rule (div {...} ). That means, that the .specialText rule would set the font-size of the div element to 18px.
However, since the div {...} CSS rule contains the instruction !important after the font-size CSS property, then that CSS property declaration takes precedence over all other declarations without the !important instruction targeting the same HTML element.
Sometimes the browser cannot determine the CSS rule or property precedence based on the !important instruction. Either because no CSS property declarations contain the !important instruction, or because multiple CSS property declaration contain the !important instruction for the same CSS property. In these cases the browser resorts to using the specificity of the CSS rule selectors to determine what CSS properties take precedence.
The specificity of a CSS rule depends on its selector. The more specific the CSS selector is, the higher is the precedence of the CSS property declarations inside the CSS rule owning the selector.
In general terms, the more specifically (uniquely) a CSS selector targets an HTML element, the higher is its specificity.
The different CSS selector types has different specificity. By specificity is meant how specifically the CSS selector targets the element is selects.
CSS inheritance is the last piece we need to investigate to get all the information and understand what style is applied to an element. The idea is that some property values applied to an element will be inherited by that element's children, and some won't.
Which properties are inherited by default and which aren't is largely down to common sense? If you want to be sure, however, you can consult the CSS Reference — each separate property page contains a summary table including various details about that element, including whether it is inherited or not.
CSS provides four special universal property values for specifying inheritance:
See Origin of CSS declarations in Introducing the CSS Cascade for more information on each of these and how they work.
A CSS rule is made up of two distinct parts - the selector and the declaration. The selector determines what is being styled on a page and the declaration is how it should be styled. For example:
p {
color: #000;
}
This is a CSS rule. The selector part is the "p", which is an element selector for "paragraphs". It would, therefore, select ALL paragraphs in a site and provide them with this style (unless there are paragraphs which are targeted by more specific styles elsewhere in your CSS document).
The part of the rule that says "color: #000;" is what is known as the declaration. That declaration is made up of two pieces - the property and the value.
The property is the "color" piece of this declaration. It dictates which aspect of the selector will be changed visually.
The value is what the chosen CSS property will be changed to. In our example, we are using the hex value of #000, which is CSS shorthand for "black".
So using this CSS rule, our page would have paragraphs displayed in a font-color of black.
When you write CSS properties, you cannot simply make them up as you see fit. For instances, "color" is an actual CSS property, so you can use it. This property is what determines the text color of an element. If you tried to use "text-color" or "font-color" as CSS properties, these would fail because they are not actual parts of the CSS language.
Another example is the property "background-image". This property sets an image that can be used for a background, like this:
.logo {
background-image: url(/images/company-logo.png);
}
If you tried to use "background-picture" or "background-graphic" as a property, they would fail because, once again, these are not actual CSS properties.
There are a number of CSS properties that you can use to style a site. Some examples are:
These CSS properties are great ones to use as examples, because they are all very straightforward and, even if you do not know CSS, you can probably guess what they do based on their names.
There are other CSS properties that you will encounter as well which may not be as obvious how they work based on their names:
As you get deeper into web design, you will encounter (and use) all these properties and more!
Every time you use a property, you must give it a value - and certain properties can only accept certain values.
In our first example of the "color" property, we need to use a color value. This could be a hex value, RGBA value, or even color keywords. Any of those values would work, however, if you used the word "gloomy" with this property, it would do nothing because, as descriptive as that word may be, it is not a recognized value in CSS.
Our second example of "background-image" requires an image path be used to fetch an actual image from your site's files. This is the value/syntax that is required.
All CSS properties have values that they expect. For example:
If you go through the list of CSS properties, you will discover that each of them has specific values that they will use to create the styles they are intended for.
Go Back