Lesson 8:The Precedence Rules in CSS

❮ Previous Lesson Next Lesson ❯

You have learned that there are various types of selectors in preceding lessons, now we shall examine the precedence rules that govern the selectors. It is important to understand which rule will be given precedence if two or more rules govern the same element. Based on these rules, the browser will determine what styles to apply to a given HTML element. Basically, there are three rules, the sequential rule, the specificity rule and the important rule.

8.1 Sequential Rule

The rule applies when two identical elements are having a different set of CSS properties, the latter will take precedence over the first. Let's examine the following example:

Example 8.1

<!Doctype html>
<html>
<head>
<title> Sibling Selector in CSS</title>
<style type=”text/css”>

h2{ text-decoration:underline;color:red}
h2{text-decoration:none;color:blue;}
</style>
</head>
<body>
<p>We have learned about the child and descendant selectors in the previous lesson. In this lesson, we shall learn about another type of selector which also resembles members of a family, it is called sibling selector.

There are two types of sibling selectors, they are <h2>adjacent sibling selector </h2> and <h2>general sibling selector</h2></p>
</body>
</html>

The output

We have learned about child and descendent selectors in previous lesson. In this lesson, we shall learn about another type of selector which also resembles members of a family, it is called sibling selector. There are two types of sibling selectors, they are

adjacent sibling selector

and

general sibling selector

*Notice that the CSS rules of the second selector h2 applies.

The 8.2 Specificity Rule

Among the CSS selectors, some are more specific than others. If one particular selector is more specific than the other selectors, the CSS style rules of the more specific selector shall applies. Let's examine the following example:

Example 8.2

<!Doctype html>
<html>
<head>
<title> Sibling Selector in CSS</title>
<style type=”text/css”>

p {color: green; font-size:100%}

p ~h2{ text-decoration:underline;color:red;}
p#section{text-decoration:underline;color:blue;}
</style>
</head>
<body>
<p id="section">We have learned about child and descendent selectors in previous lesson. In this lesson, we shall learn about another type of selector which also resembles members of a family, it is called sibling selector.</p>

<p>There are two types of sibling selectors, they are <h2>adjacent sibling selector </h2> and <h2>general sibling selector</h2></p>
</body>
</html>

The Output

There are two types of sibling selectors, they are

adjacent sibling selector

and

general sibling selector

* In our example, P~h2 and P#section are more specific than p.

8.3 The Important Rule

The important rule applies when you add !important after a property value. The !important keyword indicates that this selector should be given the top precedence over the other selectors. Let's examine the following example:

Example 8.3


<!Doctype html>
<html>
<head>
<title> Sibling Selector in CSS</title>
<style type="text/css">

p {color: green!important; font-size:100%}

p~h2{text-decoration:underline;color:red;}
p#section{text-decoration:underline;color:blue;font-size:120%;}
</style>
</head>
<body>
<p id="section">We have learned about child and descendent selectors in previous lesson. In this lesson, we shall learn about another type of selector which also resembles members of a family, it is called sibling selector.</p>

<p>There are two types of sibling selectors, they are <h2>adjacent sibling selector </h2> and <h2>general sibling selector</h2></p>
</body>
</html>

The output

There are two types of sibling selectors, they are

adjacent sibling selector

and

general sibling selector

* Notice that after adding the keyword !important to green under the p selector, it is given preference over the blue color.

❮ Previous Lesson Next Lesson ❯