Let us look at an example:
Example
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
Example Explained
In the example above. all three paragraphs will get a red background color, even though the ID selector and the class selector has a higher specificity. The !important rule overrides the background-color property in both cases.
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
Tip: It is good to know about the !important rule, you might see it in some CSS source code. However, do not use it unless you absolutely have to.
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
The look of a button can sometimes change if we put it inside another element with higher specificity, and the properties get in conflict. Here is an example of this:
Example
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
To "force" all buttons to have the same look, no matter what, we can add the !important rule to the properties of the button, like this:
Example
.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}
10 videos|41 docs|23 tests
|
|
Explore Courses for Class 6 exam
|