432

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

4
  • is there css collections selector like this .main [:hover,ul,ul>li,p] { display:inline-block;} Aug 23, 2013 at 15:36
  • 7
    Can do a "has children" selector object:not(:empty) { display: none; } jsfiddle.net/xeepete/949a55oo
    – reepee
    Aug 7, 2014 at 11:19
  • @xeepete can you provide a more complete suggestion? Jul 13, 2016 at 12:17
  • There is now an answer! The :has selector is being added to CSS. Reopen the question? Aug 21, 2022 at 3:09

3 Answers 3

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:

16
  • 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 9, 2012 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... Jun 24, 2013 at 8:30
  • 9
    yea i know, php much Aug 23, 2013 at 15:37
  • 30
    @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. Jun 17, 2014 at 20:01
  • 21
    FYI, this now exists in the CSS Selectors Level 4 spec: :has()
    – Ajedi32
    Oct 15, 2015 at 13:48
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)');
9
  • 2
    Thanks -- but how is that different from $("#parent #child")? Jan 4, 2010 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. Jan 4, 2010 at 22:38
  • 12
    The OP said that he knew how to do it with jQuery, but wanted CSS
    – bren
    Aug 1, 2014 at 20:07
  • 7
    @SpeedyNinja, nevertheless answer contains better jQuery snippet than topic starter's
    – userlond
    Apr 10, 2015 at 7:07
  • 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, 2016 at 16:49
-6

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

<object class="hasparams">

then do

object.hasparams
3
  • Thanks, but I need to do this before the objects even exist; otherwise they will flash up momentarily before being hidden. Jan 4, 2010 at 22:06
  • If your problem is the flash of unstyled content (FOUC) maybe you should solve this. See here: stackoverflow.com/questions/3221561/…
    – andy
    Feb 18, 2014 at 8: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, 2014 at 2:41

Not the answer you're looking for? Browse other questions tagged or ask your own question.