Trying to select a non-specific div using its child

[cozbaldwin]

Hi, all. Hoping today’s conundrum is just a matter of simple oversight on my part.

I have a div I want to hide. It’s being created by a wordpress gallery-type plugin.

It has a class assigned, but it’s the same class that many others on the page are using. It does, however, contain an anchor tag with a unique href. And I cannot figure out the way to hide that div (if there is a way…).

EXAMPLE:

<div id="content">
<div class="album"><a href="1"></div>
<div class="album"><a href="2"></div>
<div class="album"><a href="3"></div>
</div>

I am looking to hide the div that contains the link to 2.
And, unfortunately, using an nth-child selector will not work because the order of the albums will change as I add more albums.

I was hoping I could write something like:
div.album[a[href*="2"]] {display:none}
(AKA: Select the div which contains the anchor tag which has the attribute of 2.)

Yes, I know there’s a way with jquery, too. Looking for css solution, though.
Thanks!

[chrisburton]

It’s being created by a wordpress gallery-type plugin

Why not edit the plugin?

[cozbaldwin]

Why not edit the plugin?
Honestly, I guess because I’m not sure how to do that so it generates a unique id on the div with every new album creation. This plugin mirrors (and links) to a picasa account. So when it sees a new album on picasa, it uses the picasa api to generate a thumbnail and link, then wrapping it in a div.

[chrisburton]

How are you outputting the data?

[cozbaldwin]

How are you outputting the data?

I am not doing anything. It’s the plugin, which is using technology I’m not familiar with. I’m just an html/css guy and was hoping for a css selector solution.
Here’s the page in question. The div I want to hide is the one that contains the “Scrapbook Photos” album (and maybe some others if I get it working). http://www.thevillageplayers.com/photos/

[__]

CSS simply doesn’t have a “parent” selector. If you want to hide the album using CSS only, you’ll need to change the plugin to add some unique attribute to the parent div that you can target.

On the other hand, finding+hiding it with javascript is fairly straightforward:

document
  .querySelector('a[href*="Scrapbook"]')
  .parentNode.style.display = 'none';

All gone. Just be sure to choose a selector that only matches the one specific anchor you want.

[cozbaldwin]

ok, well I’m glad at least I wasnt being a moron by overlooking some selector combination… though it feels like there would/should be.

Chalk it up to another reason for needing a parent selector added ASAP.

Thanks for your time, guys.

[__]

You’re welcome. And just in case you’re interested, it’s not that no one thinks a parent selector wouldn’t be useful, it’s just that it’s difficult to implement with the way CSS works internally. The CSS4 spec has :has(). There was also a “subject selector” which allowed you to choose which part of a combination selector was the subject of the rule (as opposed to the last element automatically being the subject), but it seems they removed it.

[cozbaldwin]

… seems legit…

[Author]

Posts