Asked  7 Months ago    Answers:  5   Viewed   27 times

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

 Answers

46

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:

  • Is there a CSS parent selector?
  • CSS Parent/Ancestor Selector
  • Complex CSS selector for parent of active child
Tuesday, June 1, 2021
 
tpow
answered 7 Months ago
84

No, it's not possible using just one selector. The :first-of-type pseudo-class selects the first element of its type (div, p, etc). Using a class selector (or a type selector) with that pseudo-class means to select an element if it has the given class (or is of the given type) and is the first of its type among its siblings.

Unfortunately, CSS doesn't provide a :first-of-class selector that only chooses the first occurrence of a class. As a workaround, you can use something like this:

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }

Explanations and illustrations for the workaround are given here and here.

Tuesday, June 1, 2021
 
oroshnivskyy
answered 7 Months ago
11

Unfortunately, there is no way (at least none I know of) to select nth-of-type of a class, since nth-of-class doesnt exist. You will probably have to add a new class to every third .module manually.

Tuesday, June 1, 2021
 
nhunston
answered 7 Months ago
83

focus-within and a transition hack can approximate this. The transition is to make sure the style is kept even if you click outside.

label {
  font-weight: 400;
  transition:0s 999s;
}

label:focus-within {
  font-weight: 900;
  transition:0s;
}
<label for="radio-3">
  <input type="radio" id="radio-3" value="3" >
  Hello world!
</label>
Friday, August 20, 2021
 
medhybrid
answered 4 Months ago
47

This is not possible via CSS Selectors currently.

The desired behavior is only specified in CSS Selectors level 4, the one you could need is :not(.X):nth-last-match(1, .Y), but currently no browser supports it.

So, the best solution is to use jQuery as @BoltClock wrote in a comment or to generate the desired class in the html.

Wednesday, August 25, 2021
 
ttran4040
answered 3 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share