Parent Selector Challenge

[Mittineague]

While reading a post at the Meta Discourse forum

Can I hide an admin?

one of the suggested solutions was to use CSS to display: none

However, though there are child elements that can be targeted, the containing element can not be. Thus some of the other child elements will still display.

If one could change the HTML a class or Id could be added, but as it is now there are none.

JavaScript has handy DOM traversing functions like ParentNode and ChildNode but CSS has no ParentNode.

IMHO CSS has advanced into what I would consider to historically be JavaScript territory.
eg. transitions, animations and other “API” methods

In a October 21, 2010 post by @chriscoyier
Parent Selectors in CSS
he mentioned how handy having a parent selector would be.

Counter arguments included

• it would be too resource intensive
• it would be giving authors a “gun” to “shoot themselves in the foot with”

As to the first, perhaps not so much of a concern 5 years later?
As to the second, I’m not buying it, there are already plenty of “guns” that cause problems.

So, can anyone come up with a way to go up the DOM using only CSS or is JavaScript the only solution?

[DaveMaxwell]

If you could know the account, you could use the href selector

a[href="/users/joeAdmin"] { display:none; }

[RyanReese]

@Mittineague

it would be too resource intensive

I never liked this argument. The same is still somewhat repeated this day about the universal selector. True maybe 5 years ago, but having that selector wouldn’t make or break the speed test in this day and age.

@Mittineague

it would be giving authors a “gun” to “shoot themselves in the foot with”

How in the world is this even a valid argument? Every language has hundreds of “guns”.

[Mittineague]

@DaveMaxwell

If you could know the account, you could use the href selector

I tried a variation of that approach

Say @ralphm wants to be an Admin, but doesn’t want to be pestered with PMs and wants to hide the fact that he’s an Admin from the About page

section.about.admins div.user-image a[data-user-card="ralphm"], 
section.about.admins div.user-detail a[data-user-card="ralphm"] {
  display: none;
}

changes

to

“Title” (and “Name” too if he had one ) still show.
If the containing element could be targeted (or a way to go up and then back down to other children) the whole enchilada could be removed in one go.

[ralphm]

There is a parent selector of sorts on the way—the relational pseudo-class :has()—but it will only be usable via JavaScript (a bit like querySelector()).

[Mittineague]

@ralphm

There is a parent selector of sorts on the way

Looks promising.

For this HTML

<div class="ember-view user-small" id="ember1822">
  <div class="user-image">
    <a data-user-card="ralphm" href="/users/ralphm">
      <img alt="" src="https://cdn.discourse.org/sitepoint/user_avatar/sitepoint/ralphm/45/9180_1.png" class="avatar" title="administrator" height="45" width="45">
    </a>
  </div>
  <div class="user-detail">
    <div class="name-line">
      <span class="username">
        <a data-user-card="ralphm" href="/users/ralphm">ralphm</a>
      </span>
      <span class="name"><!----></span>
    </div>
    <div class="title">administrator</div>
  </div>
</div>

This jQuery has() works.

$("div.ember-view.user-small").has("a[href='/users/ralphm']").css("display","none");

[ralphm]

@Mittineague

This jQuery has() works

Yes, I think the :has() selector is meant to imitate that jQuery version. It just won’t be necessary to use jQuery for that any more.