How to apply a style to only the first class that occurs? - css

Question

So I'm trying to apply a specific style to only the first class that occurs on the page with the class name of .one_third. I have three columns and three rows with this class, therefore having 9 of these classes altogether. I am trying to make only the first one, being the top left, black in background.
I was attempting to create it myself with Pseudo-classes, and I came up with this:
.one_third:first-child
Although that made all the classes on the far left black, instead of just the top left one.
I then tried this, to apply it against my content div that holds all the classes, yet that failed to do anything.
#content > .one_third:first-child
How could I achieve this?
EDIT:
This is my exact HTML markup:

Answer 1

For example,
<div class="jey">
<p>Number 1</p>
<p>Number 2</p>
<p>Number 3</p>
</div>
<div class="jey">
<p>Number 1</p>
<p>Number 2</p>
<p>Number 3</p>
</div>
Apply style
.jey:first-of-type{
background-color:Red;
}
See this http://jsfiddle.net/jeyashri_shri/Td8bx/
and this one also worked in your code
#content .one_third:first-child {
color:red;
}
But first-child to work in IE, a '<!DOCTYPE>' must be declared.
it work on IE7+ but not on IE6 or lower

Answer 2

Change:
<div class="one_third> //you forgot to add closing quote
to
<div class="one_third">
and
.one-third:first-child //class name is incorrect
to
.one_third:first-child
Fiddle here.

Answer 3

You can check any of the following, if one of them works for you:
.clear div.one_third:first-child{
color:red;
}
.columns div.one_third:first-child{
color:red;
}
As you have already used this: #content div.one_third:first-child{color:red;} that's why I put those. Check and let me know.