Loading...
CSS Selectors Complete Reference
This comprehensive CSS selectors reference guide provides developers with a complete listing of all CSS selectors, organized for quick and effective use during development. It covers basic selectors, combinators, attribute selectors, pseudo-classes, pseudo-elements, advanced selectors, and media query selectors. Each selector includes syntax, description, practical examples, and browser support to ensure accurate application across different environments. By using this guide, developers can write precise, maintainable CSS, optimize selector specificity, and leverage modern CSS features efficiently. This reference is structured for fast lookup and thorough understanding, supporting both legacy and modern browser compatibility.
📊 Basic Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| * | * | Universal selector - selects all elements | * { margin: 0; } | All browsers |
| element | tagname | Type selector - selects all elements of specified type | p { color: blue; } | All browsers |
| .class | .classname | Class selector - selects elements with specified class | .highlight { background: yellow; } | All browsers |
| \#id | #idname | ID selector - selects element with specified ID | #header { width: 100%; } | All browsers |
📊 Combinator Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| descendant | A B | Descendant selector - selects B inside A | div p { margin: 10px; } | All browsers |
| child | A > B | Child selector - selects direct child B of A | ul > li { list-style: none; } | IE7+ |
| adjacent sibling | A + B | Adjacent sibling - selects B immediately after A | h1 + p { font-weight: bold; } | IE7+ |
| general sibling | A \~ B | General sibling - selects all B siblings after A | h1 \~ p { color: gray; } | IE7+ |
📊 Attribute Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| \[attribute] | \[attr] | Selects elements with specified attribute | \[disabled] { opacity: 0.5; } | IE7+ |
| \[attribute=value] | \[attr=val] | Selects elements where attribute equals value | \[type="text"] { border: 1px solid; } | IE7+ |
| \[attribute\~=value] | \[attr\~=val] | Selects elements where attribute contains value as word | \[class\~="button"] { cursor: pointer; } | IE7+ |
| \[attribute^=value] | \[attr^=val] | Selects elements where attribute starts with value | \[href^="https"] { color: green; } | IE7+ |
| \[attribute\$=value] | \[attr\$=val] | Selects elements where attribute ends with value | \[src\$=".jpg"] { border: 2px solid; } | IE7+ |
| \[attribute*=value] | \[attr*=val] | Selects elements where attribute contains value | \[title*="important"] { font-weight: bold; } | IE7+ |
| \[attribute="value" i] | \[attr="val" i] | Case-insensitive attribute matching | \[type="EMAIL" i] { text-transform: lowercase; } | Modern browsers |
📊 Pseudo-class Selectors - Structural
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :first-child | :first-child | Selects first child element | p:first-child { margin-top: 0; } | IE7+ |
| :last-child | :last-child | Selects last child element | p:last-child { margin-bottom: 0; } | IE9+ |
| :nth-child(n) | :nth-child(n) | Selects nth child element | tr:nth-child(2n) { background: #f0f0f0; } | IE9+ |
| :nth-last-child(n) | :nth-last-child(n) | Selects nth child from end | li:nth-last-child(2) { color: red; } | IE9+ |
| :nth-of-type(n) | :nth-of-type(n) | Selects nth element of its type | h2:nth-of-type(odd) { color: blue; } | IE9+ |
| :nth-last-of-type(n) | :nth-last-of-type(n) | Selects nth element of type from end | p:nth-last-of-type(1) { font-weight: bold; } | IE9+ |
| :first-of-type | :first-of-type | Selects first element of its type | img:first-of-type { float: left; } | IE9+ |
| :last-of-type | :last-of-type | Selects last element of its type | p:last-of-type { margin-bottom: 20px; } | IE9+ |
| :only-child | :only-child | Selects element that is only child | p:only-child { text-align: center; } | IE9+ |
| :only-of-type | :only-of-type | Selects element that is only one of its type | img:only-of-type { display: block; } | IE9+ |
| :empty | :empty | Selects elements with no children | div:empty { display: none; } | IE9+ |
📊 Pseudo-class Selectors - User Action
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :hover | :hover | Selects element when mouse hovers over it | a:hover { color: red; } | All browsers |
| :active | :active | Selects element when clicked/activated | button:active { transform: scale(0.95); } | All browsers |
| :focus | :focus | Selects element when it has keyboard focus | input:focus { outline: 2px solid blue; } | All browsers |
| :focus-visible | :focus-visible | Selects element when visibly focused | button:focus-visible { outline: 2px solid; } | Modern browsers |
| :focus-within | :focus-within | Selects element containing focused element | form:focus-within { border: 1px solid blue; } | Modern browsers |
📊 Pseudo-class Selectors - Form States
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :enabled | :enabled | Selects enabled form elements | input:enabled { background: white; } | IE9+ |
| :disabled | :disabled | Selects disabled form elements | input:disabled { background: #f5f5f5; } | IE9+ |
| :checked | :checked | Selects checked checkboxes/radio buttons | input:checked + label { font-weight: bold; } | IE9+ |
| :indeterminate | :indeterminate | Selects indeterminate checkboxes | input:indeterminate { opacity: 0.5; } | IE9+ |
| :valid | :valid | Selects valid form elements | input:valid { border-color: green; } | IE10+ |
| :invalid | :invalid | Selects invalid form elements | input:invalid { border-color: red; } | IE10+ |
| :required | :required | Selects required form elements | input:required { border-left: 3px solid red; } | IE10+ |
| :optional | :optional | Selects optional form elements | input:optional { border-left: 3px solid gray; } | IE10+ |
| :read-only | :read-only | Selects read-only elements | input:read-only { background: #f9f9f9; } | Modern browsers |
| :read-write | :read-write | Selects editable elements | input:read-write { background: white; } | Modern browsers |
| :placeholder-shown | :placeholder-shown | Selects elements showing placeholder | input:placeholder-shown { font-style: italic; } | Modern browsers |
| :in-range | :in-range | Selects elements with value in range | input:in-range { border-color: green; } | Modern browsers |
| :out-of-range | :out-of-range | Selects elements with value out of range | input:out-of-range { border-color: red; } | Modern browsers |
📊 Pseudo-class Selectors - Link States
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :link | :link | Selects unvisited links | a:link { color: blue; } | All browsers |
| :visited | :visited | Selects visited links | a:visited { color: purple; } | All browsers |
| :any-link | :any-link | Selects all links (visited and unvisited) | a:any-link { text-decoration: underline; } | Modern browsers |
| :target | :target | Selects element that is target of current URL | :target { background: yellow; } | IE9+ |
📊 Pseudo-class Selectors - Logical
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :not(selector) | :not(sel) | Selects elements that don't match selector | p:not(.special) { color: gray; } | IE9+ |
| :is(selector) | :is(sel1, sel2) | Selects elements matching any selector | :is(h1, h2, h3) { margin-top: 0; } | Modern browsers |
| :where(selector) | :where(sel1, sel2) | Same as :is but with 0 specificity | :where(h1, h2) { color: blue; } | Modern browsers |
| :has(selector) | :has(sel) | Selects elements containing selector | div:has(img) { border: 1px solid; } | Modern browsers |
📊 Pseudo-element Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| ::before | ::before | Inserts content before element | p::before { content: "→ "; } | IE9+ (single colon IE8+) |
| ::after | ::after | Inserts content after element | p::after { content: " ←"; } | IE9+ (single colon IE8+) |
| ::first-line | ::first-line | Selects first line of text | p::first-line { font-weight: bold; } | IE9+ (single colon IE6+) |
| ::first-letter | ::first-letter | Selects first letter of text | p::first-letter { font-size: 2em; } | IE9+ (single colon IE6+) |
| ::selection | ::selection | Selects text selected by user | ::selection { background: yellow; } | IE9+ |
| ::placeholder | ::placeholder | Selects placeholder text | input::placeholder { color: #999; } | Modern browsers |
| ::backdrop | ::backdrop | Selects backdrop of fullscreen element | dialog::backdrop { background | |
| ::marker | ::marker | Selects list item markers | li::marker { color: red; } | Modern browsers |
📊 Advanced Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :root | :root | Selects document root element | :root { --main-color: blue; } | IE9+ |
| :scope | :scope | Selects scoping element | :scope > p { margin: 0; } | Modern browsers |
| :defined | :defined | Selects defined custom elements | custom-element:defined { opacity: 1; } | Modern browsers |
| :host | :host | Selects shadow host element | :host { display: block; } | Modern browsers |
| :host(selector) | :host(sel) | Selects shadow host matching selector | :host(.active) { color: red; } | Modern browsers |
| :host-context(selector) | :host-context(sel) | Selects host in specific context | :host-context(.dark) { color: white; } | Modern browsers |
| ::slotted(selector) | ::slotted(sel) | Selects slotted content | ::slotted(p) { margin: 0; } | Modern browsers |
📊 Media Query Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| @media | @media (condition) | Applies styles based on media conditions | @media (max-width: 768px) { .nav { display: none; } } | IE9+ |
| @supports | @supports (property: value) | Applies styles if browser supports feature | @supports (display: grid) { .layout { display: grid; } } | Modern browsers |
| @container | @container (condition) | Applies styles based on container size | @container (min-width: 400px) { .card { flex-direction: row; } } | Modern browsers |
Quick Examples
css
CSS Code
/* Basic selectors combination */
.header nav ul li a:hover {
color: #007bff;
text-decoration: none;
}
/* Attribute selectors for forms */
input\[type="email"]:focus:valid {
border-color: green;
box-shadow: 0 0 5px rgba(0,255,0,0.3);
}
/* Pseudo-elements for enhanced styling */
.quote::before {
content: "“";
font-size: 2em;
color: #999;
}
/* Advanced structural selectors */
.grid-item:nth-child(3n+1) {
margin-left: 0;
}
/* Modern logical selectors */
:is(h1, h2, h3):not(.no-margin) {
margin-top: 2rem;
}Best practices and tips: Always use specific selectors to prevent unintended styling conflicts. Prefer class selectors over IDs for reusability and maintainability. Combine selectors efficiently to reduce CSS file size and improve performance. Test pseudo-class selectors, especially newer ones like :has() and :is(), across browsers for compatibility. Remember that pseudo-elements create virtual DOM elements, impacting styling but not DOM structure. Group related selectors logically, use descendant selectors carefully to avoid over-nesting, and leverage attribute selectors for dynamic form styles. Consider specificity when building complex combinations, and always validate selectors against target browsers.
🧠 Test Your Knowledge
Ready to Start
Reference Knowledge Check
Test your knowledge of CSS selectors and their usage.
3
Questions
70%
To Pass
∞
Time
∞
Attempts
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top