CSS Selectors Reference 🎯
Complete guide to CSS selectors with interactive examples, browser support information, and practical usage patterns. Master everything from basic element selection to advanced pseudo-class patterns.
Understanding CSS Selectors
CSS selectors are patterns used to select the elements you want to style. They are the foundation of CSS and enable you to target specific elements in your HTML document with precision.
🎯 Selector Purpose
Selectors define which elements in the HTML document will be styled by the CSS rules that follow.
Key Concepts:
- Specificity: Determines which CSS rule is applied when multiple rules match
- Inheritance: Some properties inherit values from parent elements
- Cascade: The order and importance of CSS rules
- Pattern Matching: Using patterns to select groups of elements
Complete CSS Selectors Reference
Reference Features:
- Interactive selector cards with live demos
- Browser support information for each selector
- Practical code examples and usage patterns
- Real-world application scenarios
- Mobile-responsive design examples
Interactive Selectors Reference
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Selectors Reference - Complete Guide</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 2rem;
color: #2c3e50;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
color: white;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.categories {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
justify-content: center;
}
.category-btn {
background: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 25px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.category-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.category-btn.active {
background: #3498db;
color: white;
}
.selectors-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
}
.selector-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.selector-card:hover {
transform: translateY(-5px);
}
.selector-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 2px solid #ecf0f1;
}
.selector-icon {
width: 50px;
height: 50px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
}
.basic { background: #3498db; }
.combinator { background: #9b59b6; }
.pseudo { background: #e74c3c; }
.attribute { background: #2ecc71; }
.structural { background: #f39c12; }
.form { background: #1abc9c; }
.selector-syntax {
font-family: 'Fira Code', monospace;
background: #2c3e50;
color: white;
padding: 0.5rem 1rem;
border-radius: 5px;
font-size: 1.1rem;
margin-bottom: 1rem;
}
.selector-description {
color: #7f8c8d;
margin-bottom: 1rem;
line-height: 1.6;
}
.example-section {
background: #f8f9fa;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
}
.example-title {
color: #2c3e50;
margin-bottom: 0.5rem;
font-weight: 600;
}
.code-example {
background: #2c3e50;
color: #ecf0f1;
padding: 1rem;
border-radius: 5px;
font-family: 'Fira Code', monospace;
font-size: 0.9rem;
margin: 0.5rem 0;
}
.demo-area {
background: #ecf0f1;
padding: 1.5rem;
border-radius: 10px;
margin-top: 1rem;
border: 2px dashed #bdc3c7;
}
.demo-element {
margin: 0.5rem 0;
padding: 0.5rem;
border-radius: 4px;
}
.browser-support {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #ecf0f1;
}
.support-badge {
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
font-weight: bold;
}
.supported { background: #d4edda; color: #155724; }
.partial { background: #fff3cd; color: #856404; }
@media (max-width: 768px) {
.selectors-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
.categories {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🎯 CSS Selectors Reference</h1>
<p>Complete guide to CSS selectors with examples and browser support</p>
</div>
<div class="categories">
<button class="category-btn active" onclick="filterSelectors('all')">All Selectors</button>
<button class="category-btn" onclick="filterSelectors('basic')">Basic Selectors</button>
<button class="category-btn" onclick="filterSelectors('combinator')">Combinators</button>
<button class="category-btn" onclick="filterSelectors('pseudo')">Pseudo-classes</button>
<button class="category-btn" onclick="filterSelectors('attribute')">Attribute Selectors</button>
<button class="category-btn" onclick="filterSelectors('structural')">Structural</button>
<button class="category-btn" onclick="filterSelectors('form')">Form Selectors</button>
</div>
<div class="selectors-grid">
<!-- Universal Selector -->
<div class="selector-card" data-category="basic">
<div class="selector-header">
<div class="selector-icon basic">🌐</div>
<div>
<h3>Universal Selector</h3>
<p>Selects all elements</p>
</div>
</div>
<div class="selector-syntax">*</div>
<div class="selector-description">
The universal selector matches any element. It's often used for CSS resets or applying global styles.
</div>
<div class="example-section">
<div class="example-title">Example:</div>
<div class="code-example">
<span class="comment">/* Reset margin and padding for all elements */</span><br>
* {<br>
margin: 0;<br>
padding: 0;<br>
box-sizing: border-box;<br>
}
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
</div>
</div>
<!-- Type Selector -->
<div class="selector-card" data-category="basic">
<div class="selector-header">
<div class="selector-icon basic">🏷️</div>
<div>
<h3>Type Selector</h3>
<p>Selects by HTML tag name</p>
</div>
</div>
<div class="selector-syntax">element</div>
<div class="selector-description">
Selects all elements of the specified type. Also known as element selector or tag selector.
</div>
<div class="example-section">
<div class="example-title">Examples:</div>
<div class="code-example">
<span class="comment">/* Select all paragraphs */</span><br>
p {<br>
line-height: 1.6;<br>
margin-bottom: 1rem;<br>
}<br><br>
<span class="comment">/* Select all headings */</span><br>
h1, h2, h3 {<br>
color: #2c3e50;<br>
font-weight: bold;<br>
}
</div>
</div>
<div class="demo-area">
<h4 style="color: #3498db;">This is a heading</h4>
<p style="line-height: 1.6; margin: 0.5rem 0;">This is a paragraph with custom styling.</p>
<p style="line-height: 1.6; margin: 0.5rem 0;">Another paragraph with the same styling.</p>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
</div>
</div>
<!-- Class Selector -->
<div class="selector-card" data-category="basic">
<div class="selector-header">
<div class="selector-icon basic">📝</div>
<div>
<h3>Class Selector</h3>
<p>Selects by class attribute</p>
</div>
</div>
<div class="selector-syntax">.classname</div>
<div class="selector-description">
Selects all elements with the specified class attribute. Classes can be reused across multiple elements.
</div>
<div class="example-section">
<div class="example-title">Examples:</div>
<div class="code-example">
<span class="comment">/* Select elements with 'button' class */</span><br>
.button {<br>
padding: 0.5rem 1rem;<br>
border-radius: 4px;<br>
cursor: pointer;<br>
}<br><br>
<span class="comment">/* Select elements with both 'btn' and 'primary' classes */</span><br>
.btn.primary {<br>
background: #3498db;<br>
color: white;<br>
}
</div>
</div>
<div class="demo-area">
<button class="demo-element" style="background: #3498db; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; margin: 0.25rem;">
.button
</button>
<button class="demo-element" style="background: #2ecc71; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; margin: 0.25rem;">
.button.success
</button>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
</div>
</div>
<!-- ID Selector -->
<div class="selector-card" data-category="basic">
<div class="selector-header">
<div class="selector-icon basic">🆔</div>
<div>
<h3>ID Selector</h3>
<p>Selects by id attribute</p>
</div>
</div>
<div class="selector-syntax">#idname</div>
<div class="selector-description">
Selects a single element with the specified id attribute. IDs should be unique within a page.
</div>
<div class="example-section">
<div class="example-title">Example:</div>
<div class="code-example">
<span class="comment">/* Select element with id 'header' */</span><br>
#header {<br>
background: #2c3e50;<br>
color: white;<br>
padding: 1rem;<br>
}<br><br>
<span class="comment">/* Select element with id 'main-content' */</span><br>
#main-content {<br>
max-width: 1200px;<br>
margin: 0 auto;<br>
}
</div>
</div>
<div class="demo-area">
<div id="header-demo" style="background: #2c3e50; color: white; padding: 1rem; border-radius: 4px;">
#header element - This should be unique on the page
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
</div>
</div>
<!-- Descendant Combinator -->
<div class="selector-card" data-category="combinator">
<div class="selector-header">
<div class="selector-icon combinator">↘️</div>
<div>
<h3>Descendant Combinator</h3>
<p>Space-separated selectors</p>
</div>
</div>
<div class="selector-syntax">selector1 selector2</div>
<div class="selector-description">
Selects all elements that are descendants of the first element (at any nesting level).
</div>
<div class="example-section">
<div class="example-title">Example:</div>
<div class="code-example">
<span class="comment">/* Select all paragraphs inside articles */</span><br>
article p {<br>
color: #7f8c8d;<br>
font-size: 0.9rem;<br>
}<br><br>
<span class="comment">/* Select list items inside navigation */</span><br>
nav ul li {<br>
display: inline-block;<br>
margin-right: 1rem;<br>
}
</div>
</div>
<div class="demo-area">
<article style="border: 1px solid #bdc3c7; padding: 1rem; border-radius: 4px;">
<h4>Article Title</h4>
<p style="color: #7f8c8d; font-size: 0.9rem;">This paragraph is inside an article</p>
<div>
<p style="color: #7f8c8d; font-size: 0.9rem;">This paragraph is also inside the article (nested in div)</p>
</div>
</article>
<p style="color: #2c3e50; margin-top: 0.5rem;">This paragraph is outside the article</p>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
</div>
</div>
<!-- Child Combinator -->
<div class="selector-card" data-category="combinator">
<div class="selector-header">
<div class="selector-icon combinator">➡️</div>
<div>
<h3>Child Combinator</h3>
<p>Direct child selector</p>
</div>
</div>
<div class="selector-syntax">selector1 > selector2</div>
<div class="selector-description">
Selects all elements that are direct children of the first element (only one level deep).
</div>
<div class="example-section">
<div class="example-title">Example:</div>
<div class="code-example">
<span class="comment">/* Select direct child paragraphs of articles */</span><br>
article > p {<br>
font-weight: bold;<br>
color: #e74c3c;<br>
}<br><br>
<span class="comment">/* Select direct list items of unordered lists */</span><br>
ul > li {<br>
border-bottom: 1px solid #ecf0f1;<br>
}
</div>
</div>
<div class="demo-area">
<div style="border: 1px solid #bdc3c7; padding: 1rem; border-radius: 4px;">
<p style="font-weight: bold; color: #e74c3c;">Direct child paragraph (styled)</p>
<div>
<p style="color: #2c3e50;">Nested paragraph (not styled)</p>
</div>
<p style="font-weight: bold; color: #e74c3c;">Another direct child paragraph (styled)</p>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
</div>
</div>
<!-- Adjacent Sibling Combinator -->
<div class="selector-card" data-category="combinator">
<div class="selector-header">
<div class="selector-icon combinator">➕</div>
<div>
<h3>Adjacent Sibling</h3>
<p>Immediately following sibling</p>
</div>
</div>
<div class="selector-syntax">selector1 + selector2</div>
<div class="selector-description">
Selects the element that immediately follows the first element and shares the same parent.
</div>
<div class="example-section">
<div class="example-title">Example:</div>
<div class="code-example">
<span class="comment">/* Select paragraph immediately after h2 */</span><br>
h2 + p {<br>
margin-top: 0;<br>
font-style: italic;<br>
}<br><br>
<span class="comment">/* Select list immediately after heading */</span><br>
h3 + ul {<br>
border-left: 3px solid #3498db;<br>
padding-left: 1rem;<br>
}
</div>
</div>
<div class="demo-area">
<h4 style="color: #2c3e50;">Heading</h4>
<p style="margin-top: 0; font-style: italic; color: #e74c3c;">Immediately after heading (styled)</p>
<p style="color: #2c3e50;">Normal paragraph (not styled)</p>
<h4 style="color: #2c3e50; margin-top: 1rem;">Another Heading</h4>
<p style="margin-top: 0; font-style: italic; color: #e74c3c;">Another immediately after heading (styled)</p>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
</div>
</div>
<!-- General Sibling Combinator -->
<div class="selector-card" data-category="combinator">
<div class="selector-header">
<div class="selector-icon combinator">👥</div>
<div>
<h3>General Sibling</h3>
<p>All following siblings</p>
</div>
</div>
<div class="selector-syntax">selector1 ~ selector2</div>
<div class="selector-description">
Selects all elements that are siblings of the first element and follow it (not necessarily immediately).
</div>
<div class="example-section">
<div class="example-title">Example:</div>
<div class="code-example">
<span class="comment">/* Select all paragraphs after h2 */</span><br>
h2 ~ p {<br>
color: #27ae60;<br>
padding-left: 1rem;<br>
}<br><br>
<span class="comment">/* Select all images after first paragraph */</span><br>
p:first-of-type ~ img {<br>
border: 2px solid #f39c12;<br>
}
</div>
</div>
<div class="demo-area">
<h4 style="color: #2c3e50;">Main Heading</h4>
<div style="color: #2c3e50;">A div element</div>
<p style="color: #27ae60; padding-left: 1rem;">Paragraph after heading (styled)</p>
<p style="color: #27ae60; padding-left: 1rem;">Another paragraph after heading (styled)</p>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
</div>
</div>
<!-- :hover Pseudo-class -->
<div class="selector-card" data-category="pseudo">
<div class="selector-header">
<div class="selector-icon pseudo">🖱️</div>
<div>
<h3>:hover Pseudo-class</h3>
<p>Mouse over element</p>
</div>
</div>
<div class="selector-syntax">selector:hover</div>
<div class="selector-description">
Selects an element when the user hovers over it with the mouse pointer.
</div>
<div class="example-section">
<div class="example-title">Example:</div>
<div class="code-example">
<span class="comment">/* Change button color on hover */</span><br>
.button:hover {<br>
background: #2980b9;<br>
transform: translateY(-2px);<br>
box-shadow: 0 4px 8px rgba(0,0,0,0.2);<br>
}<br><br>
<span class="comment">/* Show tooltip on link hover */</span><br>
a:hover::after {<br>
content: "Click to visit";<br>
position: absolute;<br>
background: #2c3e50;<br>
color: white;<br>
padding: 0.25rem 0.5rem;<br>
border-radius: 3px;<br>
font-size: 0.8rem;<br>
}
</div>
</div>
<div class="demo-area">
<button class="demo-element" style="background: #3498db; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 6px; cursor: pointer; transition: all 0.3s ease;"
onmouseover="this.style.background='#2980b9'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 8px rgba(0,0,0,0.2)'"
onmouseout="this.style.background='#3498db'; this.style.transform='translateY(0)'; this.style.boxShadow='none'">
Hover over me!
</button>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
</div>
</div>
<!-- :nth-child Pseudo-class -->
<div class="selector-card" data-category="structural">
<div class="selector-header">
<div class="selector-icon structural">🔢</div>
<div>
<h3>:nth-child()</h3>
<p>Select elements by position</p>
</div>
</div>
<div class="selector-syntax">:nth-child(pattern)</div>
<div class="selector-description">
Selects elements based on their position among siblings. Accepts keywords (odd, even) or formulas (an+b).
</div>
<div class="example-section">
<div class="example-title">Examples:</div>
<div class="code-example">
<span class="comment">/* Select every odd row */</span><br>
tr:nth-child(odd) {<br>
background: #f8f9fa;<br>
}<br><br>
<span class="comment">/* Select every 3rd element */</span><br>
li:nth-child(3n) {<br>
color: #e74c3c;<br>
}<br><br>
<span class="comment">/* Select first 5 elements */</span><br>
div:nth-child(-n+5) {<br>
font-weight: bold;<br>
}
</div>
</div>
<div class="demo-area">
<div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
<div style="background: #3498db; color: white; padding: 0.5rem; border-radius: 3px;">1</div>
<div style="background: #f8f9fa; color: #2c3e50; padding: 0.5rem; border-radius: 3px;">2</div>
<div style="background: #3498db; color: white; padding: 0.5rem; border-radius: 3px;">3</div>
<div style="background: #f8f9fa; color: #2c3e50; padding: 0.5rem; border-radius: 3px;">4</div>
<div style="background: #3498db; color: white; padding: 0.5rem; border-radius: 3px;">5</div>
<div style="background: #f8f9fa; color: #2c3e50; padding: 0.5rem; border-radius: 3px;">6</div>
</div>
<p style="margin-top: 0.5rem; font-size: 0.8rem; color: #7f8c8d;">Odd-numbered items are styled (nth-child(odd))</p>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">98%</span>
<span class="support-badge supported">4+</span>
<span class="support-badge supported">3.5+</span>
<span class="support-badge supported">9.5+</span>
</div>
</div>
</div>
</div>
<script>
function filterSelectors(category) {
const cards = document.querySelectorAll('.selector-card');
const buttons = document.querySelectorAll('.category-btn');
buttons.forEach(btn => {
btn.classList.remove('active');
if (btn.textContent.toLowerCase().includes(category)) {
btn.classList.add('active');
}
});
cards.forEach(card => {
if (category === 'all' || card.dataset.category === category) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
});
}
</script>
</body>
</html>Advanced CSS Selectors
Modern Selector Patterns
Explore advanced CSS selectors that enable complex pattern matching and sophisticated element targeting.
[attribute*="value"]
:nth-child(2n+1)
:not(.exclude)
::before / ::after
Form & State Selectors
Specialized selectors for form elements and dynamic states that enhance user interaction and validation.
input:focus
input:checked
input:valid
button:disabled
Advanced Selectors Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced CSS Selectors - Modern Selector Patterns</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
min-height: 100vh;
padding: 2rem;
color: #2c3e50;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
color: white;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.advanced-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 2rem;
}
.advanced-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.selector-group {
margin-bottom: 2rem;
}
.selector-group h3 {
color: #2c3e50;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #3498db;
}
.selector-item {
background: #f8f9fa;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
border-left: 4px solid #3498db;
}
.selector-syntax {
font-family: 'Fira Code', monospace;
background: #2c3e50;
color: white;
padding: 0.5rem 1rem;
border-radius: 5px;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.selector-description {
color: #7f8c8d;
margin-bottom: 0.5rem;
}
.demo-container {
background: #ecf0f1;
padding: 1.5rem;
border-radius: 10px;
margin: 1rem 0;
}
.attribute-demo input {
margin: 0.5rem;
padding: 0.5rem;
border: 1px solid #bdc3c7;
border-radius: 4px;
}
.form-demo input, .form-demo select {
margin: 0.5rem;
padding: 0.5rem;
border: 1px solid #bdc3c7;
border-radius: 4px;
}
.structural-demo {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 0.5rem;
margin: 1rem 0;
}
.demo-box {
background: #3498db;
color: white;
padding: 1rem;
border-radius: 4px;
text-align: center;
}
.pseudo-element-demo::before {
content: "📝 ";
font-weight: bold;
}
.pseudo-element-demo::after {
content: " ✅";
color: #2ecc71;
font-weight: bold;
}
@media (max-width: 768px) {
.advanced-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🚀 Advanced CSS Selectors</h1>
<p>Modern CSS selector patterns and powerful combination techniques</p>
</div>
<div class="advanced-grid">
<!-- Attribute Selectors -->
<div class="advanced-card">
<h2>🎯 Attribute Selectors</h2>
<div class="selector-group">
<h3>Attribute Presence & Value</h3>
<div class="selector-item">
<div class="selector-syntax">[attribute]</div>
<div class="selector-description">
Selects elements that have the specified attribute, regardless of value.
</div>
</div>
<div class="selector-item">
<div class="selector-syntax">[attribute="value"]</div>
<div class="selector-description">
Selects elements where the attribute exactly matches the specified value.
</div>
</div>
<div class="selector-item">
<div class="selector-syntax">[attribute*="value"]</div>
<div class="selector-description">
Selects elements where the attribute contains the specified substring.
</div>
</div>
</div>
<div class="demo-container attribute-demo">
<h4>Attribute Selector Demo:</h4>
<input type="text" placeholder="Regular input">
<input type="text" required placeholder="Required input">
<input type="email" placeholder="Email input">
<input type="password" placeholder="Password input">
</div>
<style>
.attribute-demo input[required] {
border-color: #e74c3c;
background: #fdedec;
}
.attribute-demo input[type="email"] {
border-color: #3498db;
background: #ebf5fb;
}
.attribute-demo input[type*="pass"] {
border-color: #2ecc71;
background: #eafaf1;
}
</style>
</div>
<!-- Form Selectors -->
<div class="advanced-card">
<h2>📝 Form Selectors</h2>
<div class="selector-group">
<h3>Form State Selectors</h3>
<div class="selector-item">
<div class="selector-syntax">:focus</div>
<div class="selector-description">
Selects the element that currently has focus.
</div>
</div>
<div class="selector-item">
<div class="selector-syntax">:checked</div>
<div class="selector-description">
Selects radio buttons or checkboxes that are checked.
</div>
</div>
<div class="selector-item">
<div class="selector-syntax">:disabled</div>
<div class="selector-description">
Selects disabled form elements.
</div>
</div>
<div class="selector-item">
<div class="selector-syntax">:valid / :invalid</div>
<div class="selector-description">
Selects form elements based on validation state.
</div>
</div>
</div>
<div class="demo-container form-demo">
<h4>Form Selector Demo:</h4>
<input type="text" placeholder="Focus me" class="focus-demo">
<input type="text" disabled placeholder="Disabled input">
<input type="email" placeholder="Invalid email" value="not-an-email">
<br>
<input type="checkbox" id="check1"> <label for="check1">Checkbox</label>
<input type="radio" id="radio1" name="demo"> <label for="radio1">Radio</label>
</div>
<style>
.form-demo .focus-demo:focus {
border-color: #3498db;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
outline: none;
}
.form-demo input:disabled {
background: #ecf0f1;
color: #95a5a6;
}
.form-demo input:invalid {
border-color: #e74c3c;
background: #fdedec;
}
.form-demo input:checked + label {
color: #2ecc71;
font-weight: bold;
}
</style>
</div>
<!-- Structural Pseudo-classes -->
<div class="advanced-card">
<h2>🏗️ Structural Pseudo-classes</h2>
<div class="selector-group">
<h3>Position-based Selection</h3>
<div class="selector-item">
<div class="selector-syntax">:first-child / :last-child</div>
<div class="selector-description">
Selects the first/last child element of its parent.
</div>
</div>
<div class="selector-item">
<div class="selector-syntax">:only-child</div>
<div class="selector-description">
Selects an element that is the only child of its parent.
</div>
</div>
<div class="selector-item">
<div class="selector-syntax">:empty</div>
<div class="selector-description">
Selects elements that have no children (including text nodes).
</div>
</div>
<div class="selector-item">
<div class="selector-syntax">:not(selector)</div>
<div class="selector-description">
Selects elements that do not match the given selector.
</div>
</div>
</div>
<div class="demo-container">
<h4>Structural Selector Demo:</h4>
<div class="structural-demo">
<div class="demo-box">First</div>
<div class="demo-box">Second</div>
<div class="demo-box">Third</div>
<div class="demo-box">Fourth</div>
<div class="demo-box">Last</div>
</div>
<div style="margin-top: 1rem;">
<div style="background: #e74c3c; color: white; padding: 0.5rem; border-radius: 3px; display: inline-block;">
Only Child
</div>
</div>
<div style="background: #95a5a6; color: white; padding: 0.5rem; border-radius: 3px; margin-top: 0.5rem;"></div>
</div>
<style>
.structural-demo .demo-box:first-child {
background: #e74c3c;
}
.structural-demo .demo-box:last-child {
background: #2ecc71;
}
.structural-demo .demo-box:nth-child(3) {
background: #f39c12;
}
.structural-demo .demo-box:not(:first-child):not(:last-child) {
transform: scale(0.9);
}
</style>
</div>
<!-- Pseudo-elements -->
<div class="advanced-card">
<h2>✨ Pseudo-elements</h2>
<div class="selector-group">
<h3>Virtual Element Selection</h3>
<div class="selector-item">
<div class="selector-syntax">::before / ::after</div>
<div class="selector-description">
Inserts content before/after the element's content.
</div>
</div>
<div class="selector-item">
<div class="selector-syntax">::first-letter</div>
<div class="selector-description">
Selects the first letter of the first line of a block-level element.
</div>
</div>
<div class="selector-item">
<div class="selector-syntax">::first-line</div>
<div class="selector-description">
Selects the first line of a block-level element.
</div>
</div>
<div class="selector-item">
<div class="selector-syntax">::selection</div>
<div class="selector-description">
Selects the portion of an element that is selected by a user.
</div>
</div>
</div>
<div class="demo-container">
<h4>Pseudo-element Demo:</h4>
<p class="pseudo-element-demo">This paragraph has ::before and ::after content</p>
<p class="first-letter-demo">This paragraph has a styled first letter. The rest of the text continues normally with regular styling applied to the content.</p>
<p class="first-line-demo">This paragraph has styled first line. The rest of the text continues normally with regular styling applied to the content that wraps to additional lines in the paragraph element.</p>
<p class="selection-demo">Select this text to see ::selection styling</p>
</div>
<style>
.first-letter-demo::first-letter {
font-size: 2em;
color: #e74c3c;
font-weight: bold;
float: left;
margin-right: 0.1em;
}
.first-line-demo::first-line {
font-weight: bold;
color: #3498db;
}
.selection-demo::selection {
background: #2ecc71;
color: white;
}
</style>
</div>
</div>
</div>
</body>
</html>CSS Selectors Cheatsheet
Quick Reference Guide
Essential CSS selectors organized by category for quick lookup and reference during development.
/* Basic Selectors */
#id .class element
/* Combinators */
parent child, sibling + sibling
Complete Selectors Cheatsheet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Selectors Cheatsheet - Quick Reference Guide</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
min-height: 100vh;
padding: 2rem;
color: #2c3e50;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
color: #2c3e50;
}
.cheatsheet-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.cheatsheet-section {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.section-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid;
}
.section-icon {
font-size: 2rem;
}
.basic { border-color: #3498db; }
.combinator { border-color: #9b59b6; }
.pseudo { border-color: #e74c3c; }
.attribute { border-color: #2ecc71; }
.structural { border-color: #f39c12; }
.form { border-color: #1abc9c; }
.selector-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.selector-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: #f8f9fa;
border-radius: 8px;
transition: background 0.2s ease;
}
.selector-row:hover {
background: #e9ecef;
}
.selector-name {
font-family: 'Fira Code', monospace;
font-weight: 600;
color: #2c3e50;
}
.selector-description {
font-size: 0.85rem;
color: #7f8c8d;
text-align: right;
}
.quick-examples {
background: #2c3e50;
color: #ecf0f1;
padding: 1.5rem;
border-radius: 10px;
margin-top: 2rem;
}
.example-title {
color: #3498db;
margin-bottom: 1rem;
font-weight: 600;
}
.code-block {
background: #34495e;
padding: 1rem;
border-radius: 5px;
margin: 1rem 0;
overflow-x: auto;
}
.specificity-guide {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 1.5rem;
border-radius: 8px;
margin-top: 2rem;
}
.browser-support {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
margin-top: 2rem;
}
.browser-item {
text-align: center;
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
}
.browser-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
.cheatsheet-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
.selector-row {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.selector-description {
text-align: left;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>📋 CSS Selectors Cheatsheet</h1>
<p>Quick reference guide for CSS selectors and their usage</p>
</div>
<div class="cheatsheet-grid">
<!-- Basic Selectors -->
<div class="cheatsheet-section basic">
<div class="section-header">
<div class="section-icon">🎯</div>
<h2>Basic Selectors</h2>
</div>
<div class="selector-list">
<div class="selector-row">
<span class="selector-name">*</span>
<span class="selector-description">Universal selector</span>
</div>
<div class="selector-row">
<span class="selector-name">element</span>
<span class="selector-description">Type selector</span>
</div>
<div class="selector-row">
<span class="selector-name">.class</span>
<span class="selector-description">Class selector</span>
</div>
<div class="selector-row">
<span class="selector-name">#id</span>
<span class="selector-description">ID selector</span>
</div>
<div class="selector-row">
<span class="selector-name">selector, selector</span>
<span class="selector-description">Group selector</span>
</div>
</div>
</div>
<!-- Combinators -->
<div class="cheatsheet-section combinator">
<div class="section-header">
<div class="section-icon">🔗</div>
<h2>Combinators</h2>
</div>
<div class="selector-list">
<div class="selector-row">
<span class="selector-name">selector selector</span>
<span class="selector-description">Descendant</span>
</div>
<div class="selector-row">
<span class="selector-name">selector > selector</span>
<span class="selector-description">Child</span>
</div>
<div class="selector-row">
<span class="selector-name">selector + selector</span>
<span class="selector-description">Adjacent sibling</span>
</div>
<div class="selector-row">
<span class="selector-name">selector ~ selector</span>
<span class="selector-description">General sibling</span>
</div>
</div>
</div>
<!-- Pseudo-classes -->
<div class="cheatsheet-section pseudo">
<div class="section-header">
<div class="section-icon">🎭</div>
<h2>Pseudo-classes</h2>
</div>
<div class="selector-list">
<div class="selector-row">
<span class="selector-name">:hover</span>
<span class="selector-description">Mouse over</span>
</div>
<div class="selector-row">
<span class="selector-name">:focus</span>
<span class="selector-description">Element focused</span>
</div>
<div class="selector-row">
<span class="selector-name">:active</span>
<span class="selector-description">Being activated</span>
</div>
<div class="selector-row">
<span class="selector-name">:visited</span>
<span class="selector-description">Visited link</span>
</div>
<div class="selector-row">
<span class="selector-name">:link</span>
<span class="selector-description">Unvisited link</span>
</div>
</div>
</div>
<!-- Attribute Selectors -->
<div class="cheatsheet-section attribute">
<div class="section-header">
<div class="section-icon">📋</div>
<h2>Attribute Selectors</h2>
</div>
<div class="selector-list">
<div class="selector-row">
<span class="selector-name">[attribute]</span>
<span class="selector-description">Attribute exists</span>
</div>
<div class="selector-row">
<span class="selector-name">[attribute="value"]</span>
<span class="selector-description">Exact match</span>
</div>
<div class="selector-row">
<span class="selector-name">[attribute*="value"]</span>
<span class="selector-description">Contains substring</span>
</div>
<div class="selector-row">
<span class="selector-name">[attribute^="value"]</span>
<span class="selector-description">Starts with</span>
</div>
<div class="selector-row">
<span class="selector-name">[attribute$="value"]</span>
<span class="selector-description">Ends with</span>
</div>
</div>
</div>
<!-- Structural Selectors -->
<div class="cheatsheet-section structural">
<div class="section-header">
<div class="section-icon">🏗️</div>
<h2>Structural Selectors</h2>
</div>
<div class="selector-list">
<div class="selector-row">
<span class="selector-name">:first-child</span>
<span class="selector-description">First child element</span>
</div>
<div class="selector-row">
<span class="selector-name">:last-child</span>
<span class="selector-description">Last child element</span>
</div>
<div class="selector-row">
<span class="selector-name">:nth-child(n)</span>
<span class="selector-description">Child at position</span>
</div>
<div class="selector-row">
<span class="selector-name">:only-child</span>
<span class="selector-description">Only child</span>
</div>
<div class="selector-row">
<span class="selector-name">:empty</span>
<span class="selector-description">No children</span>
</div>
</div>
</div>
<!-- Form Selectors -->
<div class="cheatsheet-section form">
<div class="section-header">
<div class="section-icon">📝</div>
<h2>Form Selectors</h2>
</div>
<div class="selector-list">
<div class="selector-row">
<span class="selector-name">:checked</span>
<span class="selector-description">Checked state</span>
</div>
<div class="selector-row">
<span class="selector-name">:disabled</span>
<span class="selector-description">Disabled state</span>
</div>
<div class="selector-row">
<span class="selector-name">:enabled</span>
<span class="selector-description">Enabled state</span>
</div>
<div class="selector-row">
<span class="selector-name">:valid</span>
<span class="selector-description">Valid input</span>
</div>
<div class="selector-row">
<span class="selector-name">:invalid</span>
<span class="selector-description">Invalid input</span>
</div>
</div>
</div>
</div>
<!-- Quick Examples Section -->
<div class="quick-examples">
<div class="example-title">🚀 Common Selector Patterns</div>
<div class="code-block">
<span class="comment">/* Reset and base styles */</span><br>
* {<br>
margin: 0;<br>
padding: 0;<br>
box-sizing: border-box;<br>
}<br><br>
<span class="comment">/* Navigation styling */</span><br>
nav ul li {<br>
display: inline-block;<br>
margin-right: 1rem;<br>
}<br>
nav a:hover {<br>
color: #e74c3c;<br>
text-decoration: underline;<br>
}<br><br>
<span class="comment">/* Form styling */</span><br>
input:focus {<br>
border-color: #3498db;<br>
outline: none;<br>
}<br>
input:invalid {<br>
border-color: #e74c3c;<br>
}
</div>
</div>
<!-- Specificity Guide -->
<div class="specificity-guide">
<h3>🎯 CSS Specificity Guide</h3>
<p><strong>Specificity Hierarchy (highest to lowest):</strong></p>
<ul>
<li><strong>Inline styles</strong> - 1000 points</li>
<li><strong>ID selectors</strong> - 100 points each</li>
<li><strong>Class/attribute/pseudo-class selectors</strong> - 10 points each</li>
<li><strong>Type/pseudo-element selectors</strong> - 1 point each</li>
</ul>
<p style="margin-top: 1rem;"><strong>Examples:</strong></p>
<ul>
<li><code>#header .nav-item</code> - 110 points</li>
<li><code>div.container p.text</code> - 12 points</li>
<li><code>ul li:first-child</code> - 3 points</li>
</ul>
</div>
<!-- Browser Support -->
<div class="browser-support">
<div class="browser-item">
<div class="browser-icon">🌐</div>
<div>Chrome</div>
<div style="color: #2ecc71; font-weight: bold;">Excellent</div>
</div>
<div class="browser-item">
<div class="browser-icon">🌐</div>
<div>Firefox</div>
<div style="color: #2ecc71; font-weight: bold;">Excellent</div>
</div>
<div class="browser-item">
<div class="browser-icon">🌐</div>
<div>Safari</div>
<div style="color: #2ecc71; font-weight: bold;">Excellent</div>
</div>
<div class="browser-item">
<div class="browser-icon">🌐</div>
<div>Edge</div>
<div style="color: #2ecc71; font-weight: bold;">Excellent</div>
</div>
</div>
</div>
</body>
</html>Practical Applications & Patterns
🎯 Common Use Cases
- Navigation menus and dropdowns
- Form validation and styling
- Table row striping and hover effects
- Responsive design breakpoints
- Interactive button states
- Custom list styling
🔧 Development Workflow
- Start with basic element selectors
- Use classes for reusable components
- Leverage combinators for relationships
- Apply pseudo-classes for interactivity
- Use attribute selectors for specific cases
- Test selector specificity and performance
💡 Pro Tips for Selector Mastery
Selector Strategy:
- Keep selectors as simple as possible
- Avoid overly specific selectors
- Use classes for component styling
- Leverage the cascade effectively
Performance:
- Right-to-left selector parsing
- Avoid universal selectors in key places
- Use specific classes over complex selectors
- Test selector performance in DevTools
Master CSS Selectors Today! 🚀
Start exploring CSS selectors with interactive examples and practical demos. Build your CSS skills with comprehensive reference materials and real-world usage patterns.