Yogesh Chauhan's Blog

Is there a CSS parent selector?

in CSS on July 22, 2021

I have a few posts to apply specific styles to a specific or all child elements.

How to apply style only to first child and/or only to children other than the first child?

Few more :nth-child examples in CSS

How to apply style to a specific child element using CSS?

But, CSS has yet to come up with a parent selector.

By parent selector, I mean you can just literally select any element’s parent element in CSS without JavaScript.

There is a Parent Selector concept in SassScript but it’s not quite like what developers are looking for.

Here’s another post I wrote for SCSS parent selector.

Ampersand (Parent Selector) in SCSS (Sass)

:has – a new hope

The Selectors Level 4 Draft mentions a :has() pseudo-class that will have the feature developers are looking for.

:has example

The following selector matches only a elements that has an img element child:


a:has(> img){
  ...
}

The problem is :has pseudo-class is not supported in a single browser as per now.

So, till it gets a full support, we have to use libraries like jQuery or JavaScript to achieve the same goal.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to create a simple slider with CSS and jQuery?CSSHow to scroll contents of a an element vertically using JavaScript?JavaScriptObservation of Human Behavior [Shopping Observation Example]MiscellaneousWhat is a Strict Requirement in PHP 7 Function Declarations?PHPWhat are Web services?MiscellaneousWHERE Clause in PostgresPostgresperspective property in CSSCSSWordPress get_posts ExamplesWordPressFor In Loop in Swift for BeginnersSwiftHow to change HTML content on click using JavaScript?JavaScriptHow to position an image on top of another image using CSS?CSSHow to insert Bootstrap 4 in Angular 9 app?Angular