CSS Selectors

What are Selectors?

Selectors are patterns used to select the HTML elements you want to style.

Types of Selectors

• Element: selects all elements of a given type, e.g., p
• Class: selects elements with a specific class, e.g., .example
• ID: selects a unique element by ID, e.g., #header
• Attribute: selects elements with a specific attribute, e.g., input[type="text"]

Combinators

• Descendant: selects elements inside another, e.g., div p
• Child: selects direct children, e.g., ul > li
• Adjacent sibling: selects an element directly after another, e.g., h1 + p

Examples

/* Element selector */
p { color: green; }

/* Class selector */
.example { font-weight: bold; }

/* ID selector */
#header { background: #333; }

/* Descendant selector */
div p { margin: 10px; }