CSS Specificity

What is Specificity?

CSS specificity is a set of rules that determine which styles are applied to an HTML element when there are multiple styles defined for that element. The rules are based on the specificity of the selectors used to define the styles.

CSS specificity is calculated using the following values:

The id selectors

They are the most specific selectors and are represented by a single "#" symbol followed by the id name.

As an example:

Editor

Loading...

In this example:

• We have two selectors: #header and #header h1.
• The first selector targets an element with an id attribute of "header", while the second selector targets an h1 element that is a child of an element with an id attribute of "header".

Class selectors

Class selectors are represented by a single "." symbol, a set of brackets, or a colon followed by the name of the class, attribute, or pseudo-class.

As an example:

Editor

Loading...

In this example:

• We have two div elements with a class attribute of "box".
• We can use class selectors to apply styles to both of these elements at once

Type selectors and pseudo-elements

Type selectors and pseudo-elements are represented by the name of the HTML element or a set of double-colons followed by the name of the pseudo-element.

Here's an example of type selectors and pseudo-elements:

<h1>This is a heading</h1>
<p>This is a paragraph</p>

In this example:

• We have an h1 element and a p element.

We can use type selectors to apply styles to these elements based on their tag names.

As an example:

h1 {
     font-size: 24px;
}

p {
     color: gray;
}

In this example:

• This CSS code will apply a font size of 24 pixels to the h1 element, and a gray color to the p element.
• Note that we used the tag names as selectors.

We can also use pseudo-elements to style specific parts of an element. For example, we can use the ::before pseudo-element to add content before an element.

As an example:

h1::before {
     content: "🌟 ";
}

In this example:

• This CSS code will add the text " (end of paragraph)" after the p element.
• Note that we used the double colon (::) notation to target the after pseudo-element.

Universal selectors and combinators

The Universal selectors and combinators are the least specific selectors and are represented by the asterisk symbol or the different combinators (e.g., +, >, ~).

Here's an example of universal selectors and combinators:

<div>
     <p>This is a paragraph inside a div</p>
     <ul>
          <li>Item 1</li>
          <li>Item 2</li>
     </ul>
</div>

In this example:

• We have a div element that contains a p element and a ul element with two li elements.

We can use universal selectors and combinators to apply styles to multiple elements at once.

As an example:

* {
     margin: 0;
     padding: 0;
}

In this example:

• This CSS code will remove margins and padding from all elements in the HTML document.
• Note that we used the asterisk (*) notation to target all elements.

We can also use the child combinator (>) to select elements that are direct children of other elements.

As an example:

div > p {
     font-weight: bold;
}