CSS Selector Symbols Explained

CSS uses various symbols (combinators and selector operators) to construct selectors for precisely targeting HTML elements. Below is a detailed explanation of the core CSS selector symbols and their usage, categorized for clarity:

I. Combinators (Relationship Selectors)

Used to describe the structural relationship between elements.

Symbol Name Description Example
(space) Descendant combinator Selects all descendants (any nesting level) inside an element div p → all p inside div, even deeply nested
> Child combinator Selects direct children only ul > li → only direct li children of ul, not nested ones
+ Adjacent sibling combinator Selects the immediately following sibling h1 + p → the first p right after an h1
～ General sibling combinator Selects all following siblings of the same parent h1 ～ p → all p that come after an h1 at the same level
Mnemonic:
Space = all descendants, > = direct child, + = next sibling, ～ = all later siblings.

II. Attribute Selectors

Used to select elements based on their attributes or attribute values.

Syntax Description Example
[attr] Element has the specified attribute a[href] → all a tags with an href attribute
[attr=value] Attribute value exactly equals value input[type="text"]
[attr～=value] Attribute value is a space-separated list containing value p[class～="note"] → matches class="note warning"
[attr|=value] Attribute value equals value or starts with value- (used for languages) [lang|="zh"] → matches lang="zh" or lang="zh-CN"
[attr^=value] Attribute value starts with value a[href^="https"] → all HTTPS links
[attr$=value] Attribute value ends with value img[src$=".png"] → PNG images
[attr*=value] Attribute value contains the substring value a[href*="example.com"]

III. Pseudo-Classes (Start with :)

Used to select elements in a specific state or position.

Common Pseudo-Classes:

Selector Description
:hover Mouse hovering over the element
:focus Element has keyboard/input focus (e.g., form fields)
:active Element is being activated (e.g., during a click)
:visited Visited link
:first-child First child of its parent
:last-child Last child of its parent
:nth-child(n) The n-th child (supports formulas like 2n, odd, 3n+1)
:not(selector) Negation pseudo-class — excludes matching elements
:empty Element with no children (including text nodes)
:checked Checked radio button or checkbox
:disabled Disabled form element
Example Code: 
li:not(.special):hover { color: red; }
tr:nth-child(even) { background: #f2f2f2; }

IV. Pseudo-Elements (Start with ::)

Used to style specific parts of an element (not real DOM nodes).

Pseudo-Element Description
::before Inserts content before the element’s content (requires content)
::after Inserts content after the element’s content
::first-line First line of text in the element
::first-letter First letter (often used for drop caps)
::selection Styling for user-selected text
Example Code: 
p::before { content: "» "; color: gray; }
::selection { background: yellow; }
Note: CSS3 recommends using :: for pseudo-elements and : for pseudo-classes. However, for backward compatibility, ::before can also be written as :before.

V. Other Important Symbols

Symbol Usage
* Universal selector: matches all elements
Example: * { margin: 0; }
, Selector grouping: apply the same styles to multiple selectors
Example: h1, h2, h3 { font-weight: bold; }
. Class selector
Example: .btn { ... }
# ID selector
Example: #header { ... }
: / :: Prefixes for pseudo-classes and pseudo-elements (see above)

VI. Specificity (Selector Priority) Overview

Selectors have weights that determine which styles take precedence (highest to lowest):

  1. !important
  2. Inline styles (style="...")
  3. ID selectors (#id) → weight 100
  4. Class / attribute / pseudo-class (.class, [attr], :hover) → weight 10
  5. Type / pseudo-element (div, ::before) → weight 1
  6. Universal selector * and combinators (>, +, ～) → no weight
Example: #nav .item:hover specificity = 100 + 10 + 10 = 120

Summary: Quick Reference of Common Symbols

Symbol Type Function
Descendant All descendants
> Child Direct children only
+ Adjacent sibling Immediately following sibling
～ General sibling All following siblings
. Class .my-class
# ID #my-id
* Universal All elements
, Grouping Apply same style to multiple selectors
[ ] Attribute Select by attribute
: Pseudo-class Element state/position
:: Pseudo-element Virtual part of an element

Master these symbols, and you’ll write precise, efficient, and maintainable CSS selectors!

If you’d like to dive deeper into any topic (e.g., advanced :nth-child() formulas), feel free to ask 😊