Selecting Parent Elements with CSS and jQuery_part 1

There have been occasions where I’ve wished I was able to select a parent element with CSS–and I’m not alone on this matter. However, there isn’t such thing as a Parent Selector in CSS, so it simply isn’t possible for the time being.

In this tutorial we will walk through a few cases where having a CSS parent selector might come in handy, along with some possible workarounds. Let’s get started!

Wait, What’s a Parent Selector?

CSS selectors allow us to target elements, moving down and across the DOM tree, getting more specific as we do so. Here’s an example of the kind of selector you might find in Bootstrap–it travels down the DOM tree from the nav.navbar-dark element, to the ul, the li, then finally the a.nav-link.

1. .navbar-dark .navbar-nav .nav-item .nav-link {     
2. }

 A parent selector would allow us to travel back up the DOM, targeting the parent elements of certain things. For example, we would be able to target the parent of .nav-link elements by using:

1. .nav-link::parent {
2. }

Note: this example is pure pseudo code, it does not exist nor suggest the best possible syntax!

Case 1: Styling Legacy Content

Styling legacy content, with dated markup and structure, is a classic challenge when redesigning a website. Before HTML5, for example, an image might typically have been wrapped with a p, div, or sometimes with a span along with a nested p used to wrap the image caption. There was no standard way to wrap an image and caption. Later, we adopted the figure and figcaption  elements, making our document structure more semantic.

We want the images from the legacy content to appear as above. But since there may be more div tags in our document, ones which don’t contain images at all, the following style declarations would be completely impractical.

1. .page-content div {
2.     padding: 15px;
3.     background-color: #f3f3f3;
4.     margin: 10px 0 20px;
5. }
6. .page-content div img {
7.     marging: 0 0 10px;
8. }
9. .page-content div .img-caption {
10.     color: #999;
11.     font-size: 12px;
12.     text-align: center;
13.     Wisplay: block;
14. }

It would apply the background color, padding and margins to all div elements in the content. We actually want to apply these styles exclusively to div elements which wrap an image and an image caption.

Case 2: Maintaining Video Ratio

Another example looks at maintaining embedded video (like from Youtube or Vimeo) ratio, as well as making the video fluid. These days, largely thanks to the investigative work by Dave Rupert and pals, it’s widely accepted that the best approach is to apply padding-top or padding-bottom to the parent element.

Code snippet from CSS-Tricks: Fluid width video

In a real world, however, we may would not know which element contains the video. We may find some embedded video wrapped within a div or a p without an identifiable class name, making it tricky to select the proper element on which to apply the styles.

Therefore, declaring the styles as follows is again impractical since it will impact all the divs within the .page-content including ones which don’t contain an embedded video.

1. .page-content {
2.     width: 560px;
3.     margin-right: auto;
4.     margin-left: auto;
5.     margin-top: 30px;
6. }
7. .page-content div {
8.     position: relative;
9.     padding-bottom: 56.25%;
10. }
11. .page-content div iframe {
12.     position: absolute;
13.     top: 0;
14.     width: 100%;
15.     height: 100%;
16. }

How wonderful it would be to directly select the video’s parent element!

Case 3: Responding to Form Input

In this example we have a form with several inputs. When we focus on one of the inputs, it is given a more prominent border color, highlighting the user’s position within the form.

Sometimes you also may come across the situation where not only the border color, but the element wrapping the input is highlighted, making the input even more prominent:

Input form focus.

The parent element might be a div or a p. So, how can we properly select the parent element based on certain states of its descendants?
Written by Thoriq Firdaus

If you found this post interesting, follow and support us.
Suggest for you:

CSS: Foundation classes on CSS

Coding Made Easy: HTML & CSS For Beginners

Bootstrap 4 Rapid web development framework HTML CSS JS