Manipulate only the first image with certain class

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.

• BoltClock: Can we see a little more of your HTML? :first-child would work if img is actually the first child and all your elements are clumped together in the same parent, but I think we need more context to work with.

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;
}

• BoltClock: :first-of-type operates based on element type, nothing else. See this answer for details. In your case, it happens to work only because img elements are the only ones with that class.
• pimvdb: @BoltClock: Very true, didn't realise that. @ LukeBerry please unaccept this answer so that I can delete it :)
• BoltClock: Well, I don't think you have to delete it... perhaps just explain it like I did with my comment. If img elements are going to be the only ones with that class, I'd suggest to change the selector to img.premium-icon:first-of-type instead ;)
• pimvdb: @BoltClock: Just wondering, how comes the fiddle actually works? Without the .img class, also the first span is bordered, so somehow .img has some influence.
• BoltClock: @pimvdb: It becomes a problem when you mix different element types with the same class, and/or when you mix different classes with the same type. See this fiddle; notice how the first .b element doesn't get highlighted blue but the first .a element of each type does when I use the selector .a:first-of-type.

Answer 2

The pseudo-class that you are looking for is the :first-child. According to w3schools, it works on all major browsers, since you have a <!DOCTYPE> declared.

So, a sample CSS to your problem:

img.premium-icon:first-child {
 margin-left: 10px;
}

Remember that if your img isn't the first child on the results container, then the desired pseudo-class will be :first-of-type, but it only works on IE9+.

But, as pointed by @ptriek, :first-of-type can't be used together with class names. Then, you would need to change your HTML.

Personally, what I always do is a class name like .first on the desired element, set on my serverside code, so my CSS will be simple and working on all browsers:

img.premium-icon.first {
 ...
}

• BoltClock: :first-child is a pseudo-class, not a pseudo-element.
• ptriek: :first-of-type seems to work only on elements, not classes: jsfiddle.net/EVrzg
• Erick Petrucelli: Based on the OP comment "so, it will always be the first-child as I'm only trying to select the first ever premium-icon", I understood that :first-of-type should work without class name. But you is right about your comment, then I updated my answer with the approach I use.

Answer 3

What about img:first-child { ... } ?

• Luke Berry: Forgot to mention there are other images on the page, can you use first-child on images with a class?
• paulslater19: Yes - img.premium-icon:first-child
• BoltClock: Only if it really is the first child.

Answer 4

$('.premium-icon:first') use that

• Андрей Петров: than .premium-icon:first-child { }
• Matt Ball: We already established that :first-child will not work given the markup.

Answer 5

Assuming class "premium-icon" is reserved for the relevant pictures, this JS could help:

var a=document.getElementsByClassName("premium-icon");
if (a) if (a.length>0) {manipulate_image(a[0]);}