433

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

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

3 Answers 3

Reset to default
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:

Improve this answer
Sign up to request clarification or add additional context in comments.

16 Comments

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.
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...
yea i know, php much
@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.
FYI, this now exists in the CSS Selectors Level 4 spec: :has()
|
113

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)');
Improve this answer

9 Comments

Thanks -- but how is that different from $("#parent #child")?
$("#parent #child") selects all #child elements that are children of #parent. $('#parent:has(#child)') selects all #parent elements that have #child as children.
The OP said that he knew how to do it with jQuery, but wanted CSS
@SpeedyNinja, nevertheless answer contains better jQuery snippet than topic starter's
@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.
|
-6

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

<object class="hasparams">

then do 

object.hasparams
Improve this answer

3 Comments

Thanks, but I need to do this before the objects even exist; otherwise they will flash up momentarily before being hidden.
If your problem is the flash of unstyled content (FOUC) maybe you should solve this. See here: stackoverflow.com/questions/3221561/…
Few years late to the party but YES, take a look at tahdhaze09 answer, you would use " object [class ^='hasparams'] "

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.