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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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
WordPress: How to query all posts from custom post type and display them in a list?WordPressSQL Right JoinSQL/MySQL4 different Ways to Get JavaScript OutputJavaScriptHow to change style of nth-child using jQuery?jQueryHow to test the WordPress 5.9 Beta 4?WordPressHow services and dependency injection work in Angular?AngularIN Operator in PostgreSQLPostgresThe fundamental difference between HAVING and WHERE clauses in PostgresPostgresHow to create a simple digital clock using JavaScript?JavaScriptAngular: Templates, directives, data binding, Services and dependency injectionAngularWindow setTimeout() Method in JavaScriptJavaScriptSteps to Secure a VPNMiscellaneous