Reset svg fill in css

Question

I want to have all my svgs to have the same plain color. So I use ``` svg *{ fill: #ccc; } ``` But I want to get default fills on :hover. How can I disable the fills and get defaults back?

Accepted Answer

You can do this using `:not()` and effectively style "not hovered".

```
svg *:not(:hover){
  fill: #ccc;
}
```

The above might work, here's a quick CodePen that you can play with: http://codepen.io/anon/pen/rrqyAx

You can learn more on the Mozilla Dveloper Network entry for :not()

Alternatively (I was curious) you could use fill:inherit - which is just as valid. In this case, the color used will be inherited from the fill value of the parent svg, which can be set in css also.

```
svg *:hover{
  fill : inherit;
}
```

I've added an svg styled in this manner to the CodePen.

Reset svg fill in css

Solution

Problem