Question

I have a PHP page that is bringing in results from a Database and displaying them on a page. Certain images have a red ‘ball’ to the left of their name to dictate that they have more information to be seen.

For example, there is 30 on one page, 12 of which have a red ball. I need to be able to manipulate the positioning of the first ball and leave the others as they are.

<img class="premium-icon" src="../../images/ball.png" alt="Premium Listing" />
<a href="page.php?cmd=auth&src=book&id=968365&a=CVTYJH5kavEbhwSDs" target="_blank" alt="" title="">
  <p><span style="">Result</span></p>
</a>

This is how they are layed out, each image has the same class and I’m unable to stop this.

I’m looking for a pure CSS solution, however a Javascript one would be appreciated.

Thankyou for any help.

EDIT

A little bit more information, all of this is brought in from a Database so I don’t know if in the final product the first image will even have a premium-icon. This is all in case that image does, as that image needs to be moved. So, it will always be the first-child as I’m only trying to select the first ever premium-icon.

Answer 1

You can use the first-of-type pseudoclass: http://jsfiddle.net/WAG6e/.

Edit: As BoltClock mentions, :first-of-type ignores the class, so actually you’d need to build your HTML such that the first img is the one you want to style. Then, it’s a matter of specifying the tag name:

img:first-of-type {
    border: 1px solid red;
}