• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

CSS “:parent” Selector

CSS, Front End Development · October 8, 2015

As great as CSS is, there is one thing that it lacks and that is a parent selector. The supposed reason for its nonexistence is performance concerns.

People forget that the CSS specification as it currently stands offers many selector features which when used incorrectly could be considered bad for performance.

I think justifying the lack of :parent selector purely because of performance concerns is silly. It’s like Javascript lacking the native forEach method because it is less performant than a native for or while and can introduced performance issues.

Like everything else in CSS, if you’re in the camp that opposes a :parent selector, don’t ruin it for everyone else. You decide what you want to use when you’re writing CSS, not the specification.

A little use-case I encountered recently was custom styled radio elements. I have a radio input inside of a label which resembled something like this:

<label><input type="radio" name="myRadio" value="1"> My Radio</label>

In my CSS I then hid the input element and styled the label so I could have a custom styled input. However, I couldn’t use CSS and the :checked attribute because you can’t reference the parent element.

In the end I had to resort to use a DIV which contained the label and input to do the job. The point is, while I found another solution, my original solution would have been the most ideal.

Even if a parent selector were to be introduced, it isn’t like I would use it for anything other than targeting the direct parent of an element.

I would only ever need the direct parent of an element, surely that wouldn’t cause much of a performance hit? It’s the inverse of :first-child or the direct descendant selector >

Selectors Level 4

There is a little known W3C specification called Selectors Level 4 and a parent selector might exist in the spec. Another stumbling block being it will take a long time for it to be supported well enough to use any new feature.

Looking into the specification I couldn’t actually find a reference, but I found StackOverflow answers from 2014 referencing it, so perhaps they scrapped the idea? Who knows. As always, the web evolves at a snail pace (unless you’re talking about Javascript).

Polyfill/Plugin

Someone has actually created a jQuery plugin/polyfill based on ideas from the Selectors Level 4 specification which you can checkout here.

It looks like a well-designed plugin, but honestly it might be overkill if you can just work around the lack of :parent selector instead.

Conclusion

Will there be a CSS parent selector in the future, what will it look like and do we really need one? I guess time will tell.

For the moment we just have to accept the lack of a parent selector and either work around it by changing our markup or using Javascript to achieve what we want to do.

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • Thoughts on the Flipper Zero
  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Get The Hash of A File In Node.js
  • The Most Common iPhone Passcodes (and how to guess them)
  • Wild Natural Deodorant Review
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Improving The Coopers Australian Pale Ale Extract Tin (and other tips)
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • How To Paginate An Array In Javascript

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz