Right way to use css pseudo selector? - html

Question

I have been playing with pseudo selectors and trying to figure stuff out.
This is the general look of the element I am trying to work on:
<div class=simpleGallery>
<a href="...">
<img data-attachment-id="some_number" ........>
</a>
</div>
I am trying to get text to show on a picture with a specific attribute (data-attachment-id for example). I managed to get it by searching for a href that ends in a unique way. Like this...
.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;
}
And then I get the text to show with:
.simpleGallery a:hover:before{
opacity:1;
z-index:1;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
It all works, but I was wondering why it won't work with something like this:
.simpleGallery a:before img[data-attachment-id="some_number"]
How would it be done by the image data-attachment-id instead of href in the <a> tag?
And why?
Is it because the :before can only go after the last element I am looking for?

Answer 1

.simpleGallery a:before img[data-attachment-id="some_number"]
Is saying:
1.) find an element with the class "simpleGallery"
2.) find a descendant anchor tag
3.) target that element's :before pseudo element
4.) find a descendant img tag of that pseudo element who's data-attachment-id is equal to "some_number"
The problem here is that pseudo elements are not real elements on the dom (hence pseudo) so they don't have children, siblings, decedents, etc. so your selector is invalid.
How would it be done by the image data-attachment-id instead of href
in the tag?
Exactly how you have it: img[data-attachment-id="some_number"]