CSS Selectors
The Universal Selector
*{
}
- It is universal selector which select all the elements.
The Attribute Selector
- This allows to select elements based upon the particular attribute
Input [type= “email”] {
}
- Email, checkbox, text, password are included in it.
- We have others attributes
a[href*= “wiki”] {
Color: blue;
}
a[href^=” #”] {
Color: gold;
}
a[href$= “.org”] {
Color: red;
}
- Links with “wiki” anywhere in the URL
- Links with a URL that start with “#”
- Links with a URL that ends with “.org”
- The links we use # means an element with same id in that page
<a href= “#featured” > </a>
Grouping Selectors
- Multiple selectors are separated by comma
h1, a {
}
Descendant & Child Combinators
Descendant
- The (space) combinator selects element that are descendants of the first element.
Div h2 {
Color: red;
}
Child combinator
- The > combination selects elements that are direct children of the first element.
Ul > ol {
}
Compound Selectors
- We can combine class, id and elements selectors (without spacing). This example selects divs with the class “special
- In HTML
<div class= “special” >
<h2> OMG HAHA </h2>
</div>
- In CSS
div.special {
}
Facebook
Twitter
LinkedIn
Pinterest
WhatsApp
Table of Contents
Interesting Posts
CSS Grid vs. Flexbox: When to Use Each
04/07/2025
More HTML
16/12/2024
HTML Forms
16/12/2024
Build a Full-Stack App with MERN Stack Pt 1
13/08/2025
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
