Правильный способ использования css псевдоселектора?

Question

Я играю с псевдоселекторами и пытаюсь выяснить, что происходит.

Это общий вид элемента я пытаюсь работать на:

<div class=simpleGallery> 
    <a href="..."> 
     <img data-attachment-id="some_number" ........> 
    </a> 
</div> 

Я пытаюсь получить текст, чтобы показать на картинке с определенным атрибутом (данные привязанностей-ид, например) , Мне удалось получить его, ища href, который заканчивается уникальным способом. Как это ...

.simpleGallery a[href$="GP120094-1.jpg"]:before{ 
content:'Hokus Pokus'; 
position:absolute; 
bottom:25%; 
opacity:0; 
width:100%; 
text-align:center; 
color:#fff; 
box-sizing:border-box; 
-moz-box-sizing:border-box; 
-moz-transition: all 1.2s ease; 
-webkit-transition: all 1.2s ease; 
transition: all 1.2s ease; 
} 

И тогда я получаю текст, чтобы показать с:

.simpleGallery a:hover:before{ 
opacity:1; 
z-index:1; 
-moz-transform: scale(1.1); 
-webkit-transform: scale(1.1); 
transform: scale(1.1); 
} 

Это все работает, но мне было интересно, почему он не будет работать с чем-то вроде этого:

.simpleGallery a:before img[data-attachment-id="some_number"] 

Как это сделать с помощью идентификатора изображения-изображения вместо href в теге <a>?
И почему?
Это потому, что: before может только пойти после последнего элемента, который я ищу?

Answer 1

.simpleGallery a:before img[data-attachment-id="some_number"]

говорит:

1.) найти элемент с классом "simpleGallery"

2.) найти потомок анкер тега

3.) цель этого элемента :before псевдоэлемент

4.) найти тег img для потомков этого псевдоэлемента, который имеет идентификатор ввода-вывода i s равно «some_number»

Проблема заключается в том, что псевдо элементы не являются реальными элементами на dom (следовательно, псевдо), поэтому у них нет детей, братьев и сестер, дециентов и т. д., поэтому ваш селектор недействителен.

Как это сделать с помощью изображения-вложения-идентификатора вместо href в теге?

Точно, как у вас есть: img[data-attachment-id="some_number"]