[CSS: Selectors] Simple Selectors, Combinators, Attribute Selectors, Pseudo-classes & Pseudo-elements — Documentation

[ajay-dhangar]

This sub-issue covers the entire Selectors module—one of the most important topics in CSS. Contributors will document every selector category with definitions, examples, diagrams, browser behaviors, and best practices.

This issue includes:

selectors
├── simple
│   ├── element.mdx
│   ├── class.mdx
│   ├── id.mdx
│   ├── universal.mdx
│   ├── grouping.mdx
├── combinators
│   ├── descendant.mdx
│   ├── child.mdx
│   ├── adjacent-sibling.mdx
│   ├── general-sibling.mdx
├── attribute-selectors.mdx
├── pseudo-classes.mdx
├── pseudo-elements.mdx

Each file should clearly explain:

• What the selector does
• How it affects element targeting
• Syntax
• Practical examples
• Common use cases
• Mistakes to avoid
• Performance considerations
• Visualization of relationships (especially combinators)

---

Tasks

Simple Selectors

• Document element selector
• Document class selector
• Document ID selector
• Document universal selector
• Document grouping selector

Combinators

• Document descendant combinator
• Document child combinator
• Document adjacent sibling combinator
• Document general sibling combinator

Other Selectors

• Document attribute selectors
• Document pseudo-classes
• Document pseudo-elements

General Tasks

• Add selector diagrams for combinators and pseudo-elements
• Add real-world examples (menus, forms, components, layouts)
• Add do/don't examples (⚠️ overusing ID, deep selectors, etc.)
• Cross-link with Specificity, Inheritance, and Syntax Basics
• Ensure MDX formatting works with Docusaurus

---

Suggested Structure for Each File

• Introduction
• Syntax overview
• Example code
• Best practices
• Common mistakes
• When not to use
• Browser behavior notes
• Related topics

---

Expected Outcome

A rich documentation set that teaches contributors and learners how CSS targets elements — forming the backbone for all future styling topics such as layout, effects, and responsiveness.

[github-actions]

Hi @ajay-dhangar! Thanks for opening this issue. We appreciate your contribution to this open-source project. Your input is valuable and we aim to respond or assign your issue as soon as possible. Thanks again!

[github-actions]

Thanks for adding the documentation label!


This issue is now marked as needing content updates for the CodeHarborHub site. Please ensure the description contains all necessary technical details.