dots Created with Sketch.
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.

amazon

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

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
How to create a Star Ratings using CSS?CSSAll different methods for accessing elements in the DOM using JavaScriptJavaScriptHow to create a sticky menu pin using CSS?CSSHow to install Gulp with WordPress?WordPressWhat is Conditional Rendering in React?Reactaddcslashes() and addslashes() String Functions in PHPPHPWhat are Null Sessions?MiscellaneousHow to change style of nth-child using jQuery?jQueryJavaScript Input Validation Theme Park Example using throw StatementJavaScriptHow to create ‘share on LinkedIn’ link using just HTML?HTMLHow to add onclick event to html elements dynamically using JavaScript?JavaScriptWordPress: How to display fields from ACF Flexible Contents?WordPress