How to style one particular SVG path in CSS?

Question

Is it possible to style differently a same SVG symbol with 2 distinct CSS classes. Like in this jsfiddle

Answer 1

You can style the parent div's colors, and use fill: currentColor to use that color for the appropriate SVG element.

So this CSS:

div > svg {
  width: 55px;
  height: 55px;
}

svg g g > path:nth-of-type(1) {
  fill: currentColor;
}

div:nth-of-type(even) {
  color: red;
}

div:nth-of-type(odd) {
  color: blue;
}

… used with this HTML:

… will look like this:

Fiddle