Как задать стили элемента, когда на странице он представлен двумя соседями?

Рейтинг: 0Ответов: 3Опубликовано: 04.05.2023

Например, на странице идёт: <img><img>

Как задать стили, которые бы применились к <img>, когда это два соседа, и не применялись к одиночным <img>?

css html
Источник: Stack Overflow на русском

Ответы

▲ 1

Если варианта всего два: 1 img или 2 img, то можно с помощью конструкции :last-child:first-child.

В примере через p.

p{
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 20px;
  border: 1px solid red;
  
  background-color: blue;
  color: white;
}

p:last-child:first-child {
   background-color: white;
   color: blue;
}
Нас Два соседа
<div>
  <p>1</p>
  <p>2</p>
</div>

Нас Один
<div>
  <p>1</p>
</div>

▲ 0

Если изображения разделены каким-либо элементом (не текстом), то задачу можно решить используя псевдокласс :has(). Но, перед применением, проверьте поддержку браузерами.

img {
  margin: 5px;
  width: 100px;
  box-shadow: 0 0 0 5px #000;
}

img:has(+ img),
img + img {
  box-shadow: 0 0 0 5px #f00;
}
<img src="https://i.sstatic.net/VxVNC.jpg" alt="yellow flower">
<span>ELEM</span>
<img src="https://i.sstatic.net/A9VLC.jpg" alt="green forest">
<img src="https://i.sstatic.net/oYG0R.jpg" alt="blue rose">
<span>ELEM</span>
<img src="https://i.sstatic.net/MraLT.jpg" alt="red wall">
<span>ELEM</span>
<img src="https://i.sstatic.net/A9VLC.jpg" alt="green forest">
<img src="https://i.sstatic.net/oYG0R.jpg" alt="blue rose">
<img src="https://i.sstatic.net/oYG0R.jpg" alt="blue rose">

▲ 0

Решаемо даже в рамках всех нормальных браузеров и css3, без :has() и скриптов. Нужно только решить какой именно img нужно отлавливать.

img {
  width: 50px;
  height: 50px;
  border: 1px solid red;
  margin: 5px;
}


/* you need this: */

.wrapper img:nth-last-of-type(2) {
  background-color: pink;
}
<div class="wrapper">
  <img/>
  <img/>
</div>
<hr>
<div class="wrapper">
  <img/>
  <span>*</span>
  <img/> *
  <span>*</span>
</div>