CSS selectors are essential for targeting specific HTML elements to apply styles. This guide provides a detailed overview of over 50 CSS selectors, including their syntax, descriptions, and examples to help you style web pages effectively.

1. Universal Selector

Syntax: *
Description: Targets every element on the page, including pseudo-elements and nested elements.
Example:

* {
  box-sizing: border-box;
}

Applies box-sizing to all elements for consistent layout calculations.

2. Element/Type Selector

Syntax: element
Description: Targets all elements of a specific HTML tag type.
Example:

div {
  background-color: #f0f0f0;
}

Styles all <div> elements with a light gray background.

3. Class Selector

Syntax: .class
Description: Targets elements with a specific class attribute. Multiple elements can share the same class.
Example:

.alert {
  color: red;
}

Styles elements with class="alert" in red.

4. ID Selector

Syntax: #id
Description: Targets a single element with a unique ID attribute.
Example:

#header {
  font-size: 28px;
}

Styles the element with id="header".

5. Attribute Selector

Syntax: [attribute]
Description: Targets elements with a specific attribute, regardless of its value.
Example:

[disabled] {
  opacity: 0.5;
}

Reduces opacity for all disabled elements.

6. Attribute Value Selector

Syntax: [attribute="value"]
Description: Targets elements with an exact attribute value.
Example:

input[type="text"] {
  border: 1px solid #ccc;
}

Styles <input> elements with type="text".

7. Attribute Value Contains Selector

Syntax: [attribute*="value"]
Description: Targets elements where the attribute contains the specified value.
Example:

a[href*="login"] {
  font-weight: bold;
}

Styles <a> elements with “login” in their href.

8. Attribute Value Starts With Selector

Syntax: [attribute^="value"]
Description: Targets elements where the attribute starts with the specified value.
Example:

a[href^="https"] {
  color: green;
}

Styles <a> elements with href starting with “https”.

9. Attribute Value Ends With Selector

Syntax: [attribute$="value"]
Description: Targets elements where the attribute ends with the specified value.
Example:

a[href$=".pdf"] {
  text-decoration: underline;
}

Styles <a> elements linking to PDFs.

10. Attribute Value Contains Word Selector

Syntax: [attribute~="value"]
Description: Targets elements where the attribute contains the specified word in a space-separated list.
Example:

[rel~="nofollow"] {
  opacity: 0.7;
}

Styles elements with “nofollow” in their rel attribute.

11. Attribute Value Starts With Word Selector

Syntax: [attribute|="value"]
Description: Targets elements where the attribute starts with the specified value, followed by a hyphen.
Example:

[lang|="en"] {
  font-family: Arial;
}

Styles elements with lang starting with “en” (e.g., “en-US”).

12. Descendant Selector

Syntax: selector1 selector2
Description: Targets elements that are descendants of another element, at any nesting level.
Example:

nav a {
  color: navy;
}

Styles all <a> elements inside <nav>.

13. Child Selector

Syntax: selector1 > selector2
Description: Targets direct children of a specified element.
Example:

ul > li {
  margin-bottom: 10px;
}

Styles only <li> elements directly inside <ul>.

14. Adjacent Sibling Selector

Syntax: selector1 + selector2
Description: Targets an element immediately following another at the same level.
Example:

h2 + p {
  margin-top: 5px;
}

Styles a <p> element directly following an <h2>.

15. General Sibling Selector

Syntax: selector1 ~ selector2
Description: Targets all sibling elements that follow the first selector.
Example:

h1 ~ p {
  color: gray;
}

Styles all <p> elements that are siblings of an <h1>.

16. Grouping Selector

Syntax: selector1, selector2
Description: Applies the same styles to multiple selectors.
Example:

h1, h2, h3 {
  font-family: Helvetica;
}

Styles all heading elements with Helvetica font.

17. Combinator Selector (Chaining)

Syntax: selector1selector2 (no space)
Description: Targets elements that match multiple conditions (e.g., element and class).
Example:

span.error {
  color: red;
}

Styles <span> elements with class="error".

18. :hover Pseudo-Class

Syntax: selector:hover
Description: Targets an element when the mouse pointer hovers over it.
Example:

button:hover {
  background-color: #ddd;
}

Changes button background on hover.

19. :active Pseudo-Class

Syntax: selector:active
Description: Targets an element while it’s being activated (e.g., clicked).
Example:

a:active {
  color: purple;
}

Changes link color when clicked.

20. :focus Pseudo-Class

Syntax: selector:focus
Description: Targets an element when it receives focus (e.g., via tab or click).
Example:

input:focus {
  border-color: blue;
}

Highlights focused <input> elements.

21. :visited Pseudo-Class

Syntax: selector:visited
Description: Targets links that the user has visited.
Example:

a:visited {
  color: gray;
}

Styles visited links.

22. :link Pseudo-Class

Syntax: selector:link
Description: Targets unvisited links.
Example:

a:link {
  color: blue;
}

Styles unvisited <a> elements.

23. :not() Pseudo-Class

Syntax: :not(selector)
Description: Targets elements that do not match the specified selector.
Example:

p:not(.intro) {
  font-size: 16px;
}

Styles all <p> elements except those with class="intro".

24. :first-child Pseudo-Class

Syntax: selector:first-child
Description: Targets the first child of a parent element.
Example:

li:first-child {
  font-weight: bold;
}

Styles the first <li> in a list.

25. :last-child Pseudo-Class

Syntax: selector:last-child
Description: Targets the last child of a parent element.
Example:

li:last-child {
  border-bottom: none;
}

Removes the bottom border from the last <li>.

26. :nth-child() Pseudo-Class

Syntax: :nth-child(n)
Description: Targets elements based on their position among siblings (e.g., 2, odd, even).
Example:

tr:nth-child(even) {
  background-color: #f2f2f2;
}

Styles even-numbered table rows.

27. :nth-of-type() Pseudo-Class

Syntax: :nth-of-type(n)
Description: Targets elements of a specific type based on their position.
Example:

p:nth-of-type(2) {
  color: teal;
}

Styles the second <p> element among its siblings.

28. :first-of-type Pseudo-Class

Syntax: selector:first-of-type
Description: Targets the first element of a specific type among siblings.
Example:

p:first-of-type {
  margin-top: 0;
}

Styles the first <p> in a parent.

29. :last-of-type Pseudo-Class

Syntax: selector:last-of-type
Description: Targets the last element of a specific type among siblings.
Example:

p:last-of-type {
  margin-bottom: 0;
}

Styles the last <p> in a parent.

30. :nth-last-child() Pseudo-Class

Syntax: :nth-last-child(n)
Description: Targets elements counting from the last child.
Example:

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

Styles the second-to-last <li>.

31. :nth-last-of-type() Pseudo-Class

Syntax: :nth-last-of-type(n)
Description: Targets elements of a specific type, counting from the last one.
Example:

p:nth-last-of-type(1) {
  font-style: italic;
}

Styles the last <p> of its type.

32. :only-child Pseudo-Class

Syntax: selector:only-child
Description: Targets an element that is the only child of its parent.
Example:

div:only-child {
  padding: 20px;
}

Styles a <div> that is the only child.

33. :only-of-type Pseudo-Class

Syntax: selector:only-of-type
Description: Targets an element that is the only one of its type among siblings.
Example:

img:only-of-type {
  border: 2px solid black;
}

Styles an <img> that is the only image in its parent.

34. :empty Pseudo-Class

Syntax: selector:empty
Description: Targets elements with no children or text content.
Example:

div:empty {
  background: gray;
}

Styles empty <div> elements.

35. :enabled Pseudo-Class

Syntax: selector:enabled
Description: Targets form elements that are enabled.
Example:

input:enabled {
  background: white;
}

Styles enabled <input> elements.

36. :disabled Pseudo-Class

Syntax: selector:disabled
Description: Targets form elements that are disabled.
Example:

input:disabled {
  background: #eee;
}

Styles disabled <input> elements.

37. :checked Pseudo-Class

Syntax: selector:checked
Description: Targets checked radio buttons or checkboxes.
Example:

input:checked {
  outline: 2px solid blue;
}

Styles checked <input> elements.

38. :focus-within Pseudo-Class

Syntax: selector:focus-within
Description: Targets an element that contains a focused element.
Example:

form:focus-within {
  border: 1px solid blue;
}

Highlights a <form> when any of its inputs are focused.

39. :focus-visible Pseudo-Class

Syntax: selector:focus-visible
Description: Targets elements focused via keyboard navigation (not mouse clicks).
Example:

button:focus-visible {
  outline: 3px solid green;
}

Styles buttons focused via keyboard.

40. :target Pseudo-Class

Syntax: selector:target
Description: Targets an element whose ID matches the URL’s fragment identifier.
Example:

:target {
  background: yellow;
}

Highlights elements targeted by the URL (e.g., #section1).

41. ::before Pseudo-Element

Syntax: selector::before
Description: Inserts content before an element’s content.
Example:

p::before {
  content: "★ ";
}

Adds a star before <p> content.

42. ::after Pseudo-Element

Syntax: selector::after
Description: Inserts content after an element’s content.
Example:

p::after {
  content: ".";
}

Adds a period after <p> content.

43. ::first-line Pseudo-Element

Syntax: selector::first-line
Description: Targets the first line of an element’s text.
Example:

p::first-line {
  font-weight: bold interventions;
}

Bolds the first line of <p> elements.

44. ::first-letter Pseudo-Element

Syntax: selector::first-letter
Description: Targets the first letter of an element’s text.
Example:

p::first-letter {
  font-size: 2em;
}

Enlarges the first letter of <p> elements.

45. ::selection Pseudo-Element

Syntax: selector::selection
Description: Styles text selected by the user.
Example:

::selection {
  background: yellow;
  color: black;
}

Styles selected text with a yellow background.

46. ::marker Pseudo-Element

Syntax: selector::marker
Description: Targets the marker (e.g., bullet) of list items.
Example:

li::marker {
  color: red;
}

Styles list item bullets in red.

47. :root Pseudo-Class

Syntax: :root
Description: Targets the root element of the document (usually <html>).
Example:

:root {
  --main-color: #333;
}

Defines a CSS custom property for the document.

48. :where() Pseudo-Class

Syntax: :where(selector)
Description: Groups selectors to apply styles if any match.
Example:

:where(h1, h2, h3) {
  color: navy;
}

Styles <h1>, <h2>, and <h3> elements.

49. :is() Pseudo-Class

Syntax: :is(selector)
Description: Matches any element in a list of selectors (similar to :where).
Example:

:is(section, article) p {
  line-height: 1.5;
}

Styles <p> elements inside <section> or <article>.

50. :lang() Pseudo-Class

Syntax: selector:lang(code)
Description: Targets elements with a specific language attribute.
Example:

p:lang(fr) {
  font-style: italic;
}

Styles <p> elements with lang="fr".

51. :optional Pseudo-Class

Syntax: selector:optional
Description: Targets form elements that are not required.
Example:

input:optional {
  border: 1px dashed gray;
}

Styles optional <input> elements.

52. :required Pseudo-Class

Syntax: selector:required
Description: Targets form elements that are required.
Example:

input:required {
  border: 1px solid red;
}

Styles required <input> elements.

53. :in-range Pseudo-Class

Syntax: selector:in-range
Description: Targets form elements with values within their valid range.
Example:

input:in-range {
  background: green;
}

Styles valid <input> elements (e.g., number inputs).

54. :out-of-range Pseudo-Class

Syntax: selector:out-of-range
Description: Targets form elements with values outside their valid range.
Example:

input:out-of-range {
  background: red;
}

Styles invalid <input> elements.

Conclusion

CSS selectors offer powerful and flexible ways to target HTML elements for styling. From basic element selectors to advanced pseudo-classes and pseudo-elements, mastering these tools allows you to create precise, dynamic, and responsive web designs. Experiment with these selectors to elevate your CSS skills and build visually stunning websites!