Подтвердить что ты не робот

Как выбрать первый тег img в div со многими тегами img?

У меня есть этот html:

<div class="image">
   <img src=... />
   <img src= .../>
</div>

И я бы применил css только к первому изображению div-образа класса без необходимости добавлять класс к моему первому img (в этом случае я бы сделал .image .img1, но есть ли другой способ?

Большое спасибо за вашу помощь

Ответ 1

Вы можете использовать селектор :first-child, чтобы сделать это.

Вы также можете использовать :nth-child(1) (где 1 = первый, а второй - второй и т.д.)

Наконец, более правильным способом было бы использование :first-of-type

Например:

div.image img:first-child {}

Или:

div.image img:nth-child(1) {}

Или (если есть другие элементы, скажем, <h1>, который предшествует любым изображениям:

div img:first-of-type

Если у вас есть возможность иметь div с образцом класса, в котором есть изображения внутри него, а также еще один div, в котором есть изображения, например:

HTML:

<div class="image">
   <img src=... />
   <img src= .../>
   <div class="image">
      <img src=... />
      <img src= .../>
   </div>
</div>

Затем используйте эти селектора:

Например:

div.image > img:first-child {}

Или:

div.image > img:nth-child(1) {}

Или:

div > img:first-of-type

Документация :first-child и : nth-child() и :first-of-type и дочерний комбинатор.

Обратите внимание, что :nth-child() и :first-of-type являются селекторами CSS3, которые имеют ограниченную поддержку при использовании IE. См. Могу ли я использовать селектор CSS3 для получения сведений о поддержке браузера.

Рассмотрим что-то вроде Selectivizr, чтобы помочь стандартизировать IE.

Ответ 2

Вы можете сделать это, используя селектор first-child

.image img:first-child
{
  height:500px;
  width:200px;
  border:15px solid Red;    
}

Пример скрипта JS

Ответ 3

Селектор ': first-child' кажется, что это может быть то, что вам нужно.

http://www.w3schools.com/cssref/sel_firstchild.asp

Ответ 4

Если вы хотите, чтобы первое изображение внутри DIV (и могли быть другие элементы, предшествующие ему), вам нужно first-of-type, а не first-child

div > img:first-of-type {}

рассмотрим следующий html

<div>
    <p>paragraph, this is :first-child</p>
    <img src="..."><!-- this is img:first-of-type -->
</div>

Более подробную информацию можно найти на https://developer.mozilla.org/en-US/docs/CSS/:first-of-type