У меня есть этот html:
<div class="image">
<img src=... />
<img src= .../>
</div>
И я бы применил css только к первому изображению div-образа класса без необходимости добавлять класс к моему первому img (в этом случае я бы сделал .image .img1, но есть ли другой способ?
Большое спасибо за вашу помощь
Вы можете использовать селектор :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.
Вы можете сделать это, используя селектор first-child
.image img:first-child
{
height:500px;
width:200px;
border:15px solid Red;
}
Селектор ': first-child' кажется, что это может быть то, что вам нужно.
Если вы хотите, чтобы первое изображение внутри 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