Seperating css for home page and list elements

I'm trying to change the color of the following -

.views-field-field-teaser-value p {
color: #fff;

margin-bottom: 0;
font-size: .9em;
line-height: 1.4em;
}

But this element controls the values of both elements on the homepage and on index pages with teaser content included.

I am trying to override the color value so that it displays #fff on the homepage and #000 on the index pages.

Any ideas.

I'm guessing this is very simple and I will feel silly very soon. But I'm still trying to get my head round the sub themeing config of version 2.0...