CSS advanced selectors help you target elements on your webpage more precisely. Whether you’re styling lists, creating hover effects, or working with sibling elements, these selectors make life easier! Here’s a breakdown with examples to make things clear. 🚀

1. Child Selector (>) 👶

• What it does: Targets the direct children of an element.

ul > li {
  color: red; /* Only styles the direct <li> elements inside the <ul> */
}

Example:

✅ Styled:

<ul>
  <li>Direct Child</li>
</ul>

❌ Not Styled:

<ul>
  <li>
    <ul>
      <li>Nested Child</li>
    </ul>
  </li>
</ul>

2. Adjacent Sibling Selector (+) 🤝

• What it does: Styles an element that comes right after another one.

h2 + p {
  font-size: 16px; /* Styles the <p> right after <h2> */
}

3. General Sibling Selector (~) 🎯

• What it does: Styles all siblings that come after a specific element.

h1 ~ p {
  color: gray; /* Styles all <p> elements that come after an <h1> */
}