-
Hajipur, Bihar, 844101
Hajipur, Bihar, 844101
CSS Basics
CSS Styling Properties
CSS Box Model
CSS Margin
CSS Padding
CSS Borders
CSS Outline
CSS Height/Width
CSS Max-width
CSS Display
CSS Position
CSS Z-index
CSS Overflow
CSS Float
CSS Inline-block
CSS Align
CSS Box Sizing
CSS Text
CSS Fonts
CSS Icons
CSS Text Effects
CSS Web Fonts
CSS Colors
CSS Backgrounds
CSS Color Keywords
CSS Gradients
CSS Shadows
CSS Links
CSS Lists
CSS Tables
CSS Advanced Selectors & Features
CSS Combinators
CSS Pseudo-classes
CSS Pseudo-elements
CSS Attribute Selectors
CSS Specificity
CSS !important
CSS Units
CSS Variables
CSS @property
CSS Math Functions
CSS Media and Image Styling
CSS Image Styling
CSS Image Centering
CSS Image Filters
CSS Image Shapes
CSS object-fit
CSS object-position
CSS Masking
CSS Layout Techniques
CSS Website Layout
CSS Navigation Bar
CSS Dropdowns
CSS Image Gallery
CSS Counters
CSS Pagination
CSS Multiple Columns
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)
CSS Specificity determines which CSS rule is applied when multiple rules target the same element. It defines the priority of a selector.
If multiple styles apply to the same element, the browser uses the rule with the highest specificity value.
Selector Type | Specificity Value |
---|---|
Universal (* ) |
0,0,0 |
Element (div , p ) |
0,0,1 |
Class (.class ) |
0,1,0 |
Attribute ([type] ) |
0,1,0 |
Pseudo-class (:hover ) |
0,1,0 |
ID (#id ) |
1,0,0 |
Inline styles | 1,0,0 (but higher priority) |
!important |
Overrides all (but avoid overuse) |
p {
color: blue; /* Specificity: 0,0,1 */
}
.text {
color: green; /* Specificity: 0,1,0 */
}
#main {
color: red; /* Specificity: 1,0,0 */
}
Final color: red due to higher specificity of
#main
.
Example:
div#main .text:hover {
color: orange;
}
Breakdown:
ID selector → 1
Class + Pseudo-class → 2
Element → 1
Specificity: 1,2,1
!important
Inline style:
<p style="color: purple;">Hello</p>
Inline styles have very high specificity: 1,0,0
Use of !important
:
p {
color: orange !important;
}
Overrides all other rules, even if specificity is lower.
If specificity is the same, the later rule in the CSS file wins.
p {
color: red;
}
p {
color: green;
}
Final color: green (last rule wins)
Q1. Set color using an element selector (h1
).
Q2. Override with a class selector (.title
).
Q3. Override again using an ID selector (#heading
).
Q4. Use an inline style to set background color.
Q5. Add !important
to a font-size rule.
Q6. Use both class and pseudo-class in a selector.
Q7. Add an attribute selector to style checkboxes.
Q8. Write a selector that combines element + ID + class.
Q9. Add multiple conflicting styles and determine which wins.
Q10. Use same specificity in two rules and reorder to test precedence.
CSS Basics
CSS Styling Properties
CSS Box Model
CSS Margin
CSS Padding
CSS Borders
CSS Outline
CSS Height/Width
CSS Max-width
CSS Display
CSS Position
CSS Z-index
CSS Overflow
CSS Float
CSS Inline-block
CSS Align
CSS Box Sizing
CSS Text
CSS Fonts
CSS Icons
CSS Text Effects
CSS Web Fonts
CSS Colors
CSS Backgrounds
CSS Color Keywords
CSS Gradients
CSS Shadows
CSS Links
CSS Lists
CSS Tables
CSS Advanced Selectors & Features
CSS Combinators
CSS Pseudo-classes
CSS Pseudo-elements
CSS Attribute Selectors
CSS Specificity
CSS !important
CSS Units
CSS Variables
CSS @property
CSS Math Functions
CSS Media and Image Styling
CSS Image Styling
CSS Image Centering
CSS Image Filters
CSS Image Shapes
CSS object-fit
CSS object-position
CSS Masking
CSS Layout Techniques
CSS Website Layout
CSS Navigation Bar
CSS Dropdowns
CSS Image Gallery
CSS Counters
CSS Pagination
CSS Multiple Columns
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)