1

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.

Luke Berry
  • 1,927
  • 4
  • 19
  • 32
  • 3
    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. – BoltClock Dec 20 '11 at 12:06

5 Answers5

2

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;
}
pimvdb
  • 151,816
  • 78
  • 307
  • 352
  • `:first-of-type` operates based on element type, nothing else. See [this answer](http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/8539107#8539107) for details. In your case, it happens to work only because `img` elements are the only ones with that class. – BoltClock Dec 20 '11 at 12:49
  • @BoltClock: Very true, didn't realise that. @ LukeBerry please unaccept this answer so that I can delete it :) – pimvdb Dec 20 '11 at 12:51
  • 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 ;) – BoltClock Dec 20 '11 at 12:56
  • @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. – pimvdb Dec 20 '11 at 12:59
  • @pimvdb: Because the `span` doesn't have the class ;) – BoltClock Dec 20 '11 at 13:00
  • @BoltClock: But you just said `:first-of-type` only operates on the element type and ignores the class. Or am I saying very weird things now? – pimvdb Dec 20 '11 at 13:02
  • 1
    @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](http://jsfiddle.net/BoltClock/7tQWP); 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`. – BoltClock Dec 20 '11 at 13:14
1

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 {
    ...
}
Erick Petrucelli
  • 14,386
  • 8
  • 64
  • 84
  • `:first-child` is a pseudo-class, not a pseudo-element. – BoltClock Dec 20 '11 at 12:15
  • 1
    :first-of-type seems to work only on elements, not classes: http://jsfiddle.net/EVrzg/ – ptriek Dec 20 '11 at 12:28
  • 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. – Erick Petrucelli Dec 20 '11 at 13:58
0

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

paulslater19
  • 5,869
  • 1
  • 28
  • 25
0

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

Андрей Петров
  • 149
  • 4
0

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]);}
Eugen Rieck
  • 64,175
  • 10
  • 70
  • 92