Манипулировать только первым изображением определенного класса

Question

У меня есть страница PHP, которая выводит результаты из базы данных и отображает их на странице.Некоторые изображения имеют красный «шарик» слева от названия, что указывает на то, что они имеют больше информации для просмотра.

Например, 30 на одной странице, 12 из которых имеют красный шар.Мне нужно уметь манипулировать позиционированием первого шара и оставлять остальные как есть.

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

Вот как они расположены: у каждого изображения один класс, и я не могу это остановить.

Я ищу чистое решение CSS, однакоJavascript один будет признателен.

Спасибо за любую помощь.

РЕДАКТИРОВАТЬ

Немного больше информации, все это взято изБаза данных, поэтому я не знаю, будет ли в конечном продукте первое изображение даже иметь премиум-значок.Это все в случае, если это изображение делает, поскольку это изображение должно быть перемещено.Таким образом, это всегда будет первый ребенок, так как я только пытаюсь выбрать первый в истории премиум-значок.

Answer 1

Вы можете использовать псевдокласс first-of-type: http://jsfiddle.net/WAG6e/.

Редактировать: Как упоминает BoltClock, :first-of-type игнорирует класс, поэтому на самом деле вам нужно построить свой HTML таким образом, чтобы первый img был тем, который вы хотите стилизовать. Затем нужно указать имя тега:

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

Answer 2

Псевдокласс, который вы ищете, это :first-child. Согласно w3schools , он работает во всех основных браузерах, поскольку у вас объявлено <!DOCTYPE>.

Итак, пример CSS к вашей проблеме:

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

Помните, что если ваш img не первый дочерний элемент в контейнере результатов, тогда желаемый псевдокласс будет :first-of-type, но он работает только в IE9 +.

Но, как указал @ptriek, :first-of-type нельзя использовать вместе с именами классов. Затем вам нужно будет изменить свой HTML.

Лично я всегда делаю имя класса, например .first, для нужного элемента, установленного на моем серверном коде, поэтому мой CSS будет простым и будет работать во всех браузерах:

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

Answer 3

$ ( 'премиум значок:. Первый') используйте это

Answer 4

Предполагая, что класс «premium-icon» зарезервирован для соответствующих изображений, этот JS может помочь:

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

Answer 5

А как же img:first-child { ... }?