Как убрать свойство opacity отдельному изображению, находящемуся внутри ссылки?

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

У меня имеется вот такой HTML-код:

<div class="gallery-wrapper">
                    <a href="#" class="picture-item">
                        <img src="img/gallery-photo-2.jpg" alt="Яхта на фоне горы" width="170"
                            height="150">
                    </a>
                    <a href="" class="picture-item">
                        <img src="img/gallery-photo-3.jpg" alt="Носовая часть яхты" width="170"
                            height="150">
                    </a>
                    <a href="#" class="picture-item">
                        <img src="img/gallery-photo-4.jpg" alt="Люди на яхте" width="170"
                            height="150">
                    </a>
                    <a href="#" class="picture-item">
                        <img src="img/gallery-photo-5.jpg" alt="Яхта в море" width="170"
                            height="150">
                    </a>
                </div>

Я хочу поставить прозрачность всем картинкам, кроме последней. Но такой код у меня не работает:

.picture-item {
    opacity: 0.5;
}

.picture-item:last-child {
    opacity: 1;
}

Как поступить в такой ситуации?

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

Ответы

▲ 1

Странно... У меня всё работает:

document.querySelectorAll('.example-div').forEach(e => {
  e.style.width = '170px';
  e.style.height = '150px';

  let color = Math.floor(Math.random() * 0xFFFFFF).toString(16);

  color = color.padEnd(6, color)

  e.style.backgroundColor = '#' + color;
})
body {
  background-color: rgb(80, 200, 80);
}

.picture-item {
  opacity: .5;
}

.picture-item:last-child {
  opacity: 1;
}
<div class="gallery-wrapper">
    <a href="#" class="picture-item">
        <div class="example-div"></div>
    </a>
    <a href="" class="picture-item">
        <div class="example-div"></div>
    </a>
    <a href="#" class="picture-item">
        <div class="example-div"></div>
    </a>
    <a href="#" class="picture-item">
        <div class="example-div"></div>
    </a>
</div>

Попробуйте через инструменты разработчика посмотреть, правда ли нет прозрачности или вам просто кажется, т.к. стили предоставленные вами, абсолютно точно работают.

▲ -1

Вот так попробуйте

.picture-item .last{opacity: 1;}