CSS Handling Conflicts Flashcards
In CSS, what is “specificity” and why is it important when handling conflicts in style rules?
Answer: Specificity is the algorithm a browser uses to determine which CSS declaration is applied to an element when multiple conflicting rules target that element. It’s crucial because it dictates the order of precedence, ensuring that the most relevant style is applied. Without specificity, styles would be applied unpredictably, leading to layout and appearance issues.
List the order of specificity, from least to most specific.
Answer: The order of specificity, from least to most specific, is:
* Type selectors (e.g., p, div) and pseudo-elements (e.g., ::before)
* Class selectors (e.g., .my-class), attribute selectors (e.g., [type="text"]), and pseudo-classes (e.g., :hover)
* ID selectors (e.g., #my-id)
* Inline styles (e.g., <p style="color: red;">)
* !important rule (which overrides everything else, but should be used sparingly)
HTML
<div id="main" class="container"> <p class="text">Hello, World!</p> </div>
CSS
p {
color: blue;
}
.text {
color: green;
}
#main .text {
color: red;
}
p[class="text"] {
color: orange;
}
What color will the text “Hello, World!” be displayed in, and why?
The text will be displayed in red. Here’s the breakdown of specificity:
-
p(type selector): Specificity = 0, 0, 0, 1 -
.text(class selector): Specificity = 0, 0, 1, 0 -
#main .text(ID selector + class selector): Specificity = 0, 1, 1, 0 -
p[class="text"](type selector + attribute selector): Specificity = 0, 0, 1, 1
The rule#main .texthas the highest specificity (0, 1, 1, 0) because it contains an ID selector, which carries more weight than class or type selectors. Therefore, the color red will be applied.
The rulep[class="text"]has the specificity of (0,0,1,1) which is higher than the .text rule, but lower than#main .textrule.
Specificity is calculated using
Explanation of Specificity Calculation:
Which CSS rule has the lowest specificity?
A) div p { color: blue; }
B) p { color: red; }
C) .text { color: green; }
D) #main { color: purple; }
Answer:
B) p { color: red; }
Explanation:
Element selector (p) → Specificity (0,0,0,1) (lowest)
Descendant selector (div p) → Specificity (0,0,0,2)
Class selector (.text) → Specificity (0,0,1,0)
ID selector (#main) → Specificity (0,1,0,0) (highest)
The element selector p has the lowest specificity.
What will happen if multiple CSS rules with the same specificity target
A) The first rule applied wins
B) The last rule applied wins
C) The browser picks one randomly
D) The rule in the external CSS file wins
Answer:
B) The last rule applied wins
Explanation:
When two rules have the same specificity, the one that appears later in the source order is applied.
What does !important do in CSS?
A) Makes the rule more specific
B) Ensures the rule is applied regardless of specificity or source order
C) Overrides only inline styles
D) Only applies to font properties
Answer:
B) Ensures the rule is applied regardless of specificity or source order
Explanation:
!important overrides all other conflicting rules, including ID selectors and inline styles.
If multiple !important rules exist, the one with the higher specificity wins.
HTML
<p class="text" id="unique">Hello, World!</p>
CSS
p {
color: blue;
}
.text {
color: green;
}
#unique {
color: red;
}
What color will the text be?
What color will the text be?
Answer:
Red
Explanation:
Element selector (p) → Specificity (0,0,0,1)
Class selector (.text) → Specificity (0,0,1,0)
ID selector (#unique) → Specificity (0,1,0,0)
Since ID selectors have the highest specificity, the color red is applied.
Which type of CSS has the highest priority by default?
A) External CSS
B) Internal CSS
C) Inline CSS
D) Class selectors
Answer:
C) Inline CSS
Explanation:
The priority order of CSS styles is:
Inline styles (style="color: red;")
Internal styles (<style> p { color: blue; } </style>)
External styles (from a CSS file)
Browser default styles
What will be the background color of the following <div>?
HTML
<div class="box" id="main" style="background-color: yellow;">
Hello, World!
</div>
CSS
.box {
background-color: blue;
}
#main {
background-color: red;
}
Answer:
Yellow
Explanation:
Inline styles override both ID and class selectors.
Since style="background-color: yellow;" is inline, it takes priority over #main and .box.
Which CSS rule will override an inline style?
A) .box { color: blue !important; }
B) #box { color: red; }
C) div.box { color: green; }
D) p { color: yellow; }
Answer:
A) .box { color: blue !important; }
Explanation:
Inline styles normally have the highest priority.
However, !important overrides inline styles, making .box { color: blue !important; } the winning rule.
What will be the text color of the paragraph?
HTML
<p class="text" style="color: blue;">Hello, World!</p>
CSS
.text {
color: red !important;
}
Answer:
Red
Explanation:
Normally, inline styles (color: blue;) override external CSS.
However, !important overrides inline styles, so the paragraph becomes red.
What happens if two !important rules conflict?
A) The browser ignores both
B) The last one in the source order wins
C) The one with the highest specificity wins
D) The rule inside <style> wins</style>
Answer:
C) The one with the highest specificity wins
Explanation:
If multiple !important rules apply, specificity still matters.
The rule with the most specific selector is applied.
Look at the following CSS and predict the text color:
HTML
<p class="text" id="special">CSS Conflicts!</p>
CSS
p {
color: blue !important;
}
.text {
color: red !important;
}
#special {
color: green;
}
Answer:
Red
Explanation:
p { color: blue !important; } → Specificity (0,0,0,1)
.text { color: red !important; } → Specificity (0,0,1,0)
#special { color: green; } → Specificity (0,1,0,0) (but no !important)
Since both p and .text have !important, the rule with higher specificity wins.
.text (0,0,1,0) is more specific than p (0,0,0,1).
Therefore, red is applied.
Question: Explain the purpose of the !important declaration in CSS. What are the potential drawbacks of using it excessively?
Answer: The !important declaration overrides all other CSS declarations. While it can be useful in specific situations, overuse can make CSS code difficult to maintain and debug, as it breaks the natural cascade.
Question: Consider this CSS: div p {color: blue;} and .container p {color: green;}. If the HTML is <div class="container"><p>Text</p></div>, what color will the text be? Why?
Answer: The text will be green. The .container p selector is more specific than div p because it includes a class selector.
Question: How does an inline style declaration compare in specificity to an ID selector?
Answer: Inline style declarations have a higher specificity than ID selectors.
Question: What is the difference between a pseudo-class and a pseudo-element, and how do they factor into specificity?
Answer:
Pseudo-classes (e.g., :hover) select elements based on their state.
Pseudo-elements (e.g., ::before) create virtual elements within an element.
Both contribute to the ‘c’ and ‘d’ part of the specificity calculation respectively.
pseudo classes go into the class, attribute and pseudo class part of the specificity calculation.
pseudo elements go into the element and pseudo element part of the specificity calculation.
Question: When two CSS rules have the same specificity, how does the browser determine which rule to apply?
Answer: The rule that appears last in the CSS stylesheet will be applied.
Question: Consider the following CSS:#myDiv {font-size: 16px;}div {font-size: 12px;} What font size will an element <div id="myDiv"> have? Explain.
Answer: 16px. ID selectors have a higher specificity than element selectors.
Question: Explain what a universal selector is, and what is its specificity level?
Answer: The universal selector is the “*” symbol. It selects every element on the page. It has a specificity level of 0,0,0,0.
Question: If there is a css rule that is written like this. div#container.class {} how would you describe the resulting specificity of that selector?
Answer: That selector would have a very high level of specificity. Because it contains one ID selector, and one class selector, and one element selector. Resulting in a specificity calculation of (0,1,1,1).
