CSS Selector Cheat Sheet

css_cheatsheet.md

CSS Selector Cheat Sheet 🚀

Mastering CSS starts with understanding selectors! They're how you tell your browser EXACTLY what to style.

This cheat sheet covers the most common (and some advanced!) selectors to level up your styling game. Save it, share it, and you will never forget how to target your elements like a pro! 🎯

---

1. Universal Selector

• Selector: *
• Code:

  * {
    box-sizing: border-box;
  }

• Meaning: Styles ALL elements on the page.

---

2. Type (Element) Selector

• Selector: p
• Code:

  p {
    font-size: 16px;
  }

• Meaning: Styles all <p> (paragraph) elements.

---

3. Class Selector

• Selector: .my-class
• Code:

  .my-class {
    color: blue;
  }

• Meaning: Styles all elements with class="my-class".

---

4. ID Selector

• Selector: #my-id
• Code:

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

• Meaning: Styles the single element with id="my-id".

---

5. Attribute Selector

• Selector: [type="text"]
• Code:

  [type="text"] {
    border: 1px solid gray;
  }

• Meaning: Styles all elements that have type="text".

---

6. Descendant Selector

• Selector: div p
• Code:

  div p {
    margin-left: 20px;
  }

• Meaning: Styles any <p> tag that is inside a <div> tag.

---

7. Child Selector

• Selector: ul > li
• Code:

  ul > li {
    list-style: none;
  }

• Meaning: Styles <li> tags that are direct children of a <ul>.

---

8. Adjacent Sibling Selector

• Selector: h1 + p
• Code:

  h1 + p {
    margin-top: 20px;
  }

• Meaning: Styles a <p> tag that comes immediately after an <h1> tag.

---

9. General Sibling Selector

• Selector: h1 ~ p
• Code:

  h1 ~ p {
    color: #333;
  }

• Meaning: Styles all <p> tags that are siblings of an <h1> (after it, same parent).

---

10. Grouping Selector

• Selector: h1, h2, h3
• Code:

  h1, h2, h3 {
    font-family: sans-serif;
  }

• Meaning: Applies the same style to <h1>, <h2>, AND <h3> elements.

---

11. Chained Selector

• Selector: a.button
• Code:

  a.button {
    display: block;
  }

• Meaning: Styles <a> tags that also have the class="button".

---

12. Pseudo-class Selector (:hover)

• Selector: a:hover
• Code:

  a:hover {
    text-decoration: underline;
  }

• Meaning: Styles <a> tags when the mouse is over them.

---

13. Pseudo-class Selector (:nth-child)

• Selector: li:nth-child(even)
• Code:

  li:nth-child(even) {
    background-color: #f0f0f0;
  }

• Meaning: Styles every even-numbered <li> within its parent. (Use odd for odd, or 3 for the third).

---

14. Pseudo-element Selector (::before)

• Selector: p::before
• Code:

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

• Meaning: Inserts a star before the content of every <p> tag.

---

15. Pseudo-element Selector (::selection)

• Selector: ::selection
• Code:

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

• Meaning: Styles text when it is selected/highlighted by the user.