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

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.