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

Question

У меня имеется вот такой 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;
}

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

Answer 1

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

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

Answer 2

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

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>

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

БЛОГ НА HUSL

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

Ответы (2 шт):