418

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.)

Samuel Liew
  • 68,352
  • 105
  • 140
  • 225
Michael Gundlach
  • 94,522
  • 11
  • 34
  • 39

3 Answers3

282

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:

Community
  • 1
  • 1
Michael Greene
  • 9,996
  • 1
  • 39
  • 42
  • 80
    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
  • 107
    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 ` – 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
  • 27
    @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
  • 19
    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
109

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)');
Mikael Dúi Bolinder
  • 1,963
  • 1
  • 14
  • 34
Tatu Ulmanen
  • 115,522
  • 31
  • 176
  • 180
  • 2
    Thanks -- but how is that different from $("#parent #child")? – Michael Gundlach Jan 04 '10 at 22:07
  • 93
    `$("#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
  • 11
    The OP said that he knew how to do it with jQuery, but wanted CSS – MayorMonty Aug 01 '14 at 20:07
  • 6
    @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
-6

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

<object class="hasparams">

then do 

object.hasparams
BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
Jeepstone
  • 2,613
  • 5
  • 20
  • 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