Help me fix my CSS!

I'm blogging to:

Sirius Satellite Radio
Left of Center

Okay all you CSS studs and studettes out there...help me out.  I'm having a CSS crisis!  If you are a regular reader of my blog you notice that I try to give you some insight into my strange mind by telling you what music I am listening to while I blog.  I created a schema for describing this information and then built some CSS that I thought would render it nicely over in the right hand margin of the page.  It works fine when you go to one specific post, but if you go to the page where all the blog posts are listed one after the other, the CSS doesn't work correctly.  So each post will have an entry for the music, but I only want it to show up for the top most post...you get what I'm saying?  So here's an example of the schema:

<DIV id=NowPlaying>
<DIV id=Intro>I'm blogging to:</DIV>
<DIV id=Image><A title="Check out the Beatie Boys" href="https://www.beastieboys.com"><IMG src="https://images.amazon.com/images/P/B00021LRWM.01.THUMBZZZ.jpg"></A></DIV>
<DIV id=Artist>
<H5>The Beastie Boys</H5></DIV>
<DIV id=Album>
<H5>To The 5 Burroughs</H5></DIV></DIV>

Here's the CSS I'm using:

#NowPlaying {
        position: absolute;
 height: 200px;
 width: 170px;
 background-color: #DDDDCC;
        right: 0px;
        top: 400px;
        border: 1px;
        border-color: #770000;
        border-style: solid;

}

#Intro, #Artist, #Album{
 text-align: center;
 color: #770000;
}

#Image{
 margin-left: 50px;
}

How can I make just the top most "NowPlaying" div render and ignore any subsequent ones?  What happens instead is the bottom-most entry gets displayed (the last one) instead of the top-most entry (the first one).