CSS selector for "foo that contains bar"?

Question

Is there a way to make a CSS Selector that matches the following?

All OBJECT elements
  which have a PARAM element inside of them

The selector

OBJECT PARAM

doesn't work, as it matches the PARAM, not the OBJECT. I'd like to apply { display:none } to the objects; it's useless to apply that to the PARAMs.

(I'm aware I could pull this off with jQuery - $("object param").closest("object") - and VanillaJS - document.querySelector("object param").closest("object") - but I'm trying to create CSS rules on a page.)

is there css collections selector like this `.main [:hover,ul,ul>li,p] { display:inline-block;}` — Muhammad Umer, Aug 23 '13 at 15:36
Can do a "has children" selector `object:not(:empty) { display: none; }` http://jsfiddle.net/xeepete/949a55oo/ — reepee, Aug 07 '14 at 11:19
There is now an answer! The :has selector is being added to CSS. Reopen the question? — John Skiles Skinner, Aug 21 '22 at 03:09

score 292 · Accepted Answer · edited Apr 05 '23 at 17:47

292

No, what you are looking for would be called a parent selector. CSS has none; they have been proposed multiple times but I know of no existing or forthcoming standard including them. You are correct that you would need to use something like jQuery or use additional class annotations to achieve the effect you want.

Here are some similar questions with similar results:

edited Apr 05 '23 at 17:47

worldofjr

3,868
8
37
49

answered Jan 04 '10 at 16:36

Michael Greene

10,343
1
41
43

81

JSYK, the CSS parent selector will be coming in CSS4, as the ability to select which element in a selector is styled by putting a dollar sign in front of it: `$div > span` would select the div that has a span as a direct child. – Ian Oct 09 '12 at 15:12
109

Put a dollar sign before a selector part, so it could interfere with SCSS/SASS syntax, cool. Why don't they use the many times proposed `<` sign, or `:parent` pseudo class, or even the `!` sign after a selector part? They all seem more logical to me, than using the `$` sign... – Lajos Mészáros Jun 24 '13 at 08:30
9

yea i know, php much – Muhammad Umer Aug 23 '13 at 15:37
1

Why would you say "Select all elements having a descendant" is anything similar to "select a particular ancestor of a given element"? On places context on an element and seeks out descendants. The other places context on an element and seeks our ancestors. They are fundamentally QUITE different. – rainabba Mar 24 '14 at 19:16
@rainabba It doesn't matter which end you start the search on. Both approaches end up selecting the same elements. In that sense, they are equivalent. – Gili May 16 '14 at 20:53
29

@Mészáros Lajos CSS does not depend on SCSS, they have no obligation to do that. I'd rather see CSS become robust enough to render LESS/SCSS obsolete actually, regardless of which syntax is chosen. – Josh Ribakoff Jun 17 '14 at 20:01
@Josh Ribakoff - That would be awesome, but I doubt, they want to add that much functionality to CSS. – Lajos Mészáros Jun 18 '14 at 10:54
there is a parent selector, called :has, it has a limited scope but it should work for the case here. See one of the following answers – challet Aug 31 '15 at 15:05
edit : as seen in the possible duplicate page (http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector), it is not available in any browser. – challet Aug 31 '15 at 15:22
20

FYI, this now exists in the CSS Selectors Level 4 spec: [`:has()`](https://drafts.csswg.org/selectors-4/#relational) – Ajedi32 Oct 15 '15 at 13:48
8

For browser support, see http://caniuse.com/#feat=css-has – thSoft May 23 '16 at 23:12
3

One year later, still no cigar. – Protector one Oct 19 '17 at 19:57
Two more years later, jQuery is still my friend – Paula Livingstone Apr 24 '19 at 21:36
Whaaat. Good christmas, the use case is bonker-doodle obvious, and this is **still** not implemented? This has been possible in XPath since, well, maybe the beginning: `//parent[child]` selects any element named `parent` that has an immediate child named `child`. <...smh...> – Eiríkr Útlendi Mar 31 '20 at 00:01
1

halfway through 2020... still waiting... – bigsee Jun 12 '20 at 11:47
When this answer was posted people had wanted had already wanted it for, like, forever. It seemed like an egregiously long time to wait for such a basic selector. I was 29. 3/4 of the way though 2021 and still no dice. My phone has more processing power than my dev machine did back then. I'm 41. – ChefAndy Sep 26 '21 at 22:40

score 112 · Answer 2 · edited Feb 05 '19 at 22:02

112

Only thing that comes even close is the :contains pseudo class in CSS3, but that only selects textual content, not tags or elements, so you're out of luck.

A simpler way to select a parent with specific children in jQuery can be written as (with :has()):

$('#parent:has(#child)');

edited Feb 05 '19 at 22:02

Mikael Dúi Bolinder

2,080
2
19
44

answered Jan 04 '10 at 16:39

Tatu Ulmanen

123,288
34
187
185

2

Thanks -- but how is that different from $("#parent #child")? – Michael Gundlach Jan 04 '10 at 22:07
97

`$("#parent #child")` selects all #child elements that are children of #parent. `$('#parent:has(#child)')` selects all #parent elements that have #child as children. – Tatu Ulmanen Jan 04 '10 at 22:38
12

The OP said that he knew how to do it with jQuery, but wanted CSS – bren Aug 01 '14 at 20:07
7

@SpeedyNinja, nevertheless answer contains better jQuery snippet than topic starter's – userlond Apr 10 '15 at 07:07
This example doesn't make much sense because IDs have to be unique so you wouldn't select it more generically like this. It'd make more sense if they were classes – Zach Saucier Jun 30 '16 at 20:22
how to do it without jqueezy? – SuperUberDuper Jul 13 '16 at 12:17
2

@ZachSaucier The example makes sense in some cases. The site may have different pages where `#parent` sometimes contains `#child` and sometimes does not. If you only want to do something with the `#parent` element when it has `#child`, then this is a way to accomplish that. – Sean Sep 28 '16 at 16:49
Browser support is far from perfect: https://caniuse.com/#feat=css-has – Alex from Jitbit Aug 08 '19 at 17:06
Currently only supported on Safari (Mar '22) – jimbotron Mar 07 '22 at 21:35

score -6 · Answer 3 · edited Jan 25 '12 at 22:13

-6

Is there any way you could programatically apply a class to the object?

<object class="hasparams">

then do

object.hasparams

edited Jan 25 '12 at 22:13

BoltClock

700,868
160
1,392
1,356

answered Jan 04 '10 at 17:24

Jeepstone

2,591
5
22
38

Thanks, but I need to do this before the objects even exist; otherwise they will flash up momentarily before being hidden. – Michael Gundlach Jan 04 '10 at 22:06
If your problem is the flash of unstyled content (FOUC) maybe you should solve this. See here: http://stackoverflow.com/questions/3221561/need-help-eliminating-flash-of-unstyled-content-on-my-site/9823468#9823468 – andy Feb 18 '14 at 08:17
1

Few years late to the party but YES, take a look at tahdhaze09 answer, you would use " object [class ^='hasparams'] " – silver May 15 '14 at 02:41

CSS selector for "foo that contains bar"?

3 Answers3

Linked

Related