CSS selectors are powerful tools that allow you to target specific elements with precision. Here's a breakdown of advanced techniques:

1. Attribute Selectors 🧾

Use attributes to filter elements based on their properties:

  • [attr=value] selects elements with an attribute equal to a specific value
  • [attr^=value] matches attributes starting with a given value
  • [attr$=value] matches attributes ending with a specific value
  • [attr*=value] matches attributes containing a substring
CSS_Selectors

2. Pseudo-Classes 🤔

These add dynamic behavior to selectors:

  • :hover triggers styles on mouse hover
  • :nth-child(n) targets nth child in a group
  • :focus applies styles when an element is focused
  • :lang(language) selects elements based on language attribute
CSS_Pseudo_classes

3. Pseudo-Elements 💡

They let you style specific parts of an element:

  • ::before inserts content before an element
  • ::after inserts content after an element
  • ::first-letter styles the first letter of text
  • ::selection highlights selected text
CSS_Pseudo_elements

4. Combinators 🧩

Combine selectors with these operators:

  • > selects direct children
  • + selects adjacent siblings
  • ~ selects all siblings
  • , groups multiple selectors

For more basics, check our CSS Selectors Introduction 📘.