CSS Pseudo-Classes for SVG Path Elements

Interactive SVG <path> elements can be styled dynamically using a variety of CSS pseudo-classes when embedded directly into an HTML document. This guide explains which user-action, structural, and state pseudo-classes are supported on <path> elements, how to make paths keyboard-accessible, and how to control interactive visual states like fills, strokes, and transformations.

User Action Pseudo-Classes

User action pseudo-classes allow SVG paths to respond directly to mouse, pointer, and keyboard interactions.

:hover

The :hover pseudo-class triggers when a user hovers a pointing device over the geometry of a <path>.

path:hover {
  fill: #ff5722;
  stroke: #bf360c;
  cursor: pointer;
}

By default, SVG paths only trigger :hover over rendered areas (the fill or stroke). You can use the pointer-events property (such as pointer-events: all; or pointer-events: visiblePainted;) to define how hit testing is handled.

:active

The :active pseudo-class applies while the <path> is being activated, such as during a mouse click or screen tap.

path:active {
  transform: scale(0.95);
  transform-origin: center;
}

:focus and :focus-visible

By default, SVG <path> elements are not focusable. However, adding a tabindex="0" attribute directly to the <path> or its parent <svg> enables keyboard navigation and focus pseudo-classes.

path:focus-visible {
  outline: 2px dashed #005fcc;
  stroke-width: 3px;
}

Location and Fragment Pseudo-Classes

:target

If an SVG <path> contains an id attribute, the :target pseudo-class can style the path when the URL’s hash fragment matches that ID (for example, example.com/#region-1).

path:target {
  fill: #ffd700;
  stroke: #000;
}

Structural and Tree Pseudo-Classes

Structural pseudo-classes select paths based on their position within their parent container (such as <svg> or <g>).

• :first-child / :last-child: Targets the first or last path in a group.
• :nth-child(n) / :nth-of-type(n): Selects paths based on patterns, useful for alternating fills in complex illustrations.
• :only-child / :only-of-type: Targets a path if it is the sole element inside a group.

g > path:nth-child(even) {
  fill: #e0e0e0;
}

Logical and Relational Pseudo-Classes

Modern CSS relational and logical pseudo-classes function on SVG paths the same way they do on regular HTML elements.

• :not(): Excludes specific paths from a rule.
• :is() and :where(): Simplifies applying states across multiple grouped paths.
• :has(): Enables parent or sibling-aware styling. For example, hovering over a parent <svg> can dim all paths except the one currently hovered:

svg:has(path:hover) path:not(:hover) {
  opacity: 0.3;
  transition: opacity 0.2s ease;
}

Requirements for Interactive SVG Styling

For CSS pseudo-classes to function on SVG <path> elements:

1. Inline Embedding: The SVG markup must be rendered inline in the DOM. SVGs loaded via <img> tags or CSS background-image cannot be styled with external CSS pseudo-classes.
2. Animatable SVG Properties: Paths respond to standard presentation properties including fill, stroke, stroke-dasharray, stroke-dashoffset, opacity, transform, and filter.