Specificity and The Cascade
The Sibling Combinator
Adjacent Combinator
- The + combinator selects elements that are directly after the first element.
H1 + p {
}
Siblings Combinator
- The ~ combinator selects siblings, the 2nd element must follow the 1st element (immediately or not), and must share the same parent.
H1~p {
}
Working with Pseudo-Classes
Button:hover {
}
Others, like
- Enable
- Disable
- Read-only
- Read-write
- Placeholder-shown
- Default
- Checked
- Indeterminate
- Blank
- Valid
- In-valid
- in-range
- out-of-range
- required
- optional
- user-invalid
Styling Pseudo-Elements
P:first-of-type::first-letter {
}
ul.blah li:nth-child(even) {
background-color: magenta;
}
The Basics of Specificity
- When multiple rules with different selectors apply to the same element, which one wins out?
- Inline style
- ID style
- Class | attribute | Pseudo-Class
- Type | Pseudo-Element
Inline Styles and Specificity
- ID style
- Class | attribute | Pseudo-Class
- Type | Pseudo-Element
- Div a have 0 0 2 have no ID, have no class but 2 Elements
- .featured span have 0 ID, 1 class and 1 element
- Div p.special have 0 ID, 1 class and 2 elements
- .special + .main have 0 ID, 2 classes and 0 element.
- And how to order it?
Important and The Cascade
In the event of conflict, which rule “wins”?
- Importance
- Origin
- Specificity
- Position
- Specificity
- Origin
Wrapping Up the Cascade
Importance
We can mark a declaration as important using the !important flag (generally not good idea)
H1 {
Color: purple !important;
}
For more Information Check out the link
Facebook
Twitter
LinkedIn
Pinterest
WhatsApp
Table of Contents
Interesting Posts
BSCS 7th Semester Notes
18/07/2024
How Web3 is Transforming Web Development
02/04/2025
Numerical Computing Handwritten Notes
11/10/2024
More HTML
16/12/2024
CSS Selectors
18/12/2024
Ghulam Ahmad is an Excellent Writer, His magical words added value in growth of our life. Highly Recommended
More Posts
- 12th AKUEB Handwritten Notes
- 40+ Agency WordPress Template Kits FREE
- 50+ WordPress Template kits Free
- AI is Taking Over Web Design: Will Coders Lose Their Jobs?
- AKUEB 12th Notes
- All BS Department 1st Semester Past-papers
- Artificial Intelligence
- Artist Portfolio HTML CSS Project
- Assembly language Handwritten Notes
- BSCS 1st Semester Notes
- BSCS 2nd Semester Notes
- BSCS 3rd Semester Notes
- BSCS 4th Semester Notes
- BSCS 5th Semester Notes
- BSCS 6th Semester Notes
- BSCS 7th Semester Notes
- BSCS 8th Semester Notes
- Build a Full-Stack App with MERN Stack Pt 1
- Build a Full-Stack App with MERN Stack Pt 2
- Class 10th AKUEB Notes Biology, Physics & Chemistry
- CSS Basics
- CSS Grid vs. Flexbox: When to Use Each
- CSS Selectors
- Dark Mode in Web Development: Best Practices & Implementation
- Data Mining
- Data Structure & Algorithms Notes
- Database Management System Handwritten Notes
- Design and Analysis of Algorithms
- Distributed Database System
- DSA Handwritten Notes
- Hazel CV HTML CSS Project
- How to Build Your First Website from Scratch
- How to Deploy a Website Using GitHub Pages
- How to Use Tailwind CSS for Faster and Cleaner UI Development
- How Web3 is Transforming Web Development
- HTML CSS Landing Page
- HTML Forms
- HTML, CSS, and JS: A Beginner’s Guide to Web Development
- Introduction to HTML
- JavaScript ES6: Features Every Developer Should Know
- More HTML
- No-Code Vs. Traditional Coding: Which is the Future?
- Numerical Computing Handwritten Notes
- Random Color Generator Project
- Specificity and The Cascade
- Styling Text in CSS
- The Box Model
- The Evolution of JavaScript Frameworks: From jQuery to Next.js
- The World of CSS Colors
- Theory of Automata
- Top 10 JavaScript Libraries to Speed Up Development
- Understanding HTTP Status Codes and What They Mean
- Web Design Services Pakistan – Building Digital Brands That Inspire Confidence
- Web Design Trends for 2025: Improve User Experience
- What Is an API? A Simple Guide for Beginners
- Why Businesses Choose WordPress Website Design Pakistan for Online Success
- Wireless Communication Handwritten Notes
2 Responses