CSS Selectors

CSS Selectors (Targeting HTML Elements)

CSS selectors define which elements should be styled. There are different types of CSS selectors, each used for specific targeting.

We can divide CSS selectors into five categories:

• Common selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)

a) Common Selectors

Selector	Description	Example
*	Universal selector (selects all elements)	* { margin: 0; padding: 0; }
p	Element selector (targets all <p> elements)	p { color: blue; }
.class-name	Class selector (targets elements with a specific class)	.box { background-color: yellow; }
#id-name	ID selector (targets a specific element)	#header { font-size: 24px; }

b) CSS Combinator Selectors (Select Elements Based on Relationships)

Combinator selectors help you target specific elements based on their relationship with others in the HTML structure. There are four main types of combinator selectors:

1.1 Descendant Selector ( – Space)

The descendant selector targets all nested elements inside another element, regardless of depth.

🔹 Example:

✅ This applies blue color to all <p> elements inside <div>.

1.2 Child Selector (> – Direct Child)

The child selector targets only direct children of the parent element.

🔹 Example:

✅ This applies green color to <p> elements that are direct children of <div>.

1.3 Adjacent Sibling Selector (+)

This selector targets an element immediately after a specific element.

🔹 Example:

✅ Styles the first <p> after an <h1>.

1.4 General Sibling Selector (~)

Targets all siblings after a specified element.

🔹 Example:

✅ Applies red color to all <p> elements after <h1>.

---

c) CSS Pseudo-Class Selectors (Target Elements Based on State)

A CSS pseudo-class applies styles when an element is in a specific state, such as hovered, clicked, or first-child.

2.1 :hover (Mouse Hover State)

Changes the style when a user hovers over an element.

🔹 Example:

2.2 :first-child (First Element in Parent)

Targets the first child inside a parent element.

🔹 Example:

2.3 :last-child (Last Element in Parent)

Targets the last child inside a parent element.

🔹 Example:

2.4 :nth-child(n) (Selects Elements Based on Position)

Targets elements based on their order in a parent element.

🔹 Example: Style every even row in a table for better readability.

2.5 :focus (Active Input Field Styling)

Changes the appearance when an element (like an input field) is focused.

🔹 Example:

d) CSS Pseudo-Element Selectors (Style Part of an Element)

Pseudo-elements style specific parts of an element, such as first letter, first line, or content insertion.

3.1 ::first-letter (Style First Letter of Text)

🔹 Example:

3.2 ::first-line (Style First Line of Text)

🔹 Example:

3.3 ::before (Insert Content Before an Element)

🔹 Example:

3.4 ::after (Insert Content After an Element)

🔹 Example:

e) CSS Attribute Selectors (Target Elements Based on Attributes)

Attribute selectors apply styles based on HTML attributes.

4.1 [attribute] (Select Elements with an Attribute)

🔹 Example:

4.2 [attribute=value] (Exact Match for Attribute Value)

🔹 Example:

4.3 [attribute^=value] (Attribute Starts With a Value)

🔹 Example:

4.4 [attribute$=value] (Attribute Ends With a Value)

🔹 Example:

4.5 [attribute*=value] (Attribute Contains a Value)

🔹 Example: