Right way to use css pseudo selector?

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?

Please note that the actual problem with this situation here is that it's impossible to add texts to an img, since an img is a replaced element, and any content in it can not be shown. So... you cannot use ::before or ::after on the img itself (it won't work) and you have to make do with showing extra content using ::before or ::after on the elements surrounding it. — Mr Lister
– Mr Lister, Commented Oct 30, 2016 at 8:54

Pat · Accepted Answer · 2016-10-19 21:57:46Z

2

.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"]

answered Oct 19, 2016 at 21:57

Pat

2,8682 gold badges25 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Right way to use css pseudo selector?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related