Mastering CSS Selectors

CSS provides a variety of selectors to target elements with precision. Here’s a comprehensive overview:

100%;">

1. Universal Selector

• *: Selects all elements.

* {
  margin: 0;
  padding: 0;
}

2. Type Selector

• Selects all elements of a specific type (e.g., p, div).

p {
  color: blue;
}

3. Class Selector

• Selects elements with a specific class.

.my-class {
  font-size: 18px;
}

4. ID Selector

• Selects an element with a specific ID (must be unique).

#my-id {
  background-color: yellow;
}

5. Attribute Selector

• Selects elements based on the presence, value, or part of a value of an attribute.

a[target="_blank"] {
  color: red;
}

6. Pseudo-Classes

• Dynamic pseudo-classes: Target elements in specific states.

button:hover {
  background-color: green;
}

• Structural pseudo-classes: Target elements based on their structure in the DOM.

li:nth-child(2) {
  color: purple;
}

7. Pseudo-Elements

• Single-pseudo-elements: Create and style parts of an element.

p::before {
  content: "Note: ";
  font-weight: bold;
}

8. Descendant Selector

• Selects elements that are nested within another element.

div p {
  font-size: 14px;
}

9. Child Selector

• Selects direct children of an element.

div > p {
  color: orange;
}

10. Adjacent Sibling Selector

• Selects an element that is immediately after another element.

h1 + p {
  margin-top: 0;
}

11. General Sibling Selector

• Selects all siblings after a specified element.

h1 ~ p {
  color: blue;
}

12. Grouping Selector

• Selects multiple selectors, applying the same styles to all.

h1, h2, h3 {
  font-weight: bold;
}

13. Combinators

Summary Table of Common Selectors

Selector	Type	Example	Description
*	Universal	*	Selects all elements.
E	Type	p	Selects all <p> elements.
.class	Class	.my-class	Selects all elements with the class my-class.
#id	ID	#my-id	Selects the element with the ID my-id.
[attr]	Attribute	[type="text"]	Selects elements with a specific attribute.
E, F	Grouping	h1, h2, h3	Selects multiple element types.
E F	Descendant	div p	Selects all <p> elements within <div>.
E > F	Child	ul > li	Selects direct child <li> elements in <ul>.
E + F	Adjacent Sibling	h1 + p	Selects the <p> element directly after <h1>.
E ~ F	General Sibling	h1 ~ p	Selects all <p> elements after <h1>.

Using these selectors helps create efficient and targeted styles, which can make your CSS code more organized and maintainable.