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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to animate list items using CSS and JavaScript?CSSHow to create a blurry text effect using CSS?CSSHow to create a pricing table using flex in CSS?CSSHow does while loop work in SCSS?SCSS3 Types of Arrays in PHPPHPWhat is HTMLUnknownElement?HTMLWhat is ECMAScript?JavaScriptSQL Right JoinSQL/MySQLUNION and UNION ALL in PostgresPostgresSolution to Could not cast value of type ‘NSTaggedPointerString’ to ‘NSNumber’SwiftHow to make a UILabel clickable in Swift 5?SwiftHow to implement NSNumberFormatter in Swift for currency?Swift