Question 262284 in CSS Question posted in
Some basic documentation can be found here.

Css – Selecting a parent based on a nested childs data attributes

I’m successfully selecting a user avatar using this neat has selector:

  ul.remaining [data-avatar-for-person-id="44220253"] {
    width: 40px !important;
    height: 40px !important;
  }

Is it possible to use the has selector to select the parent li for this todo?

I’m trying like this, but its not being applied to the element – at all, not just because of specificality.

  li:has(img[data-avatar-for-person-id="44220253"] ) {
    font-size: 1.05em !important;
    color: black !important;
  }

the image is burried down in some divs and spans within the li.

I’m using firefox, but have enabled the experimental feature:

https://caniuse.com/css-has

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    According to caniuse i needed to enable the feature for firefox current version (118)

    So I visted about:config and searched for has-selector and set

    layout.css.has-selector.enabled true

    And now my custom stylesheet works, enabling me to highlight todos assigned to me in basecamp 4. yay.


  2. 0

    The :has selector works for me in Chrome. If this isn’t working for you in Firefox, make sure you have the latest version, check that the feature is enabled, restart Firefox then check to make sure it’s still enabled.

    p {
  background-color: lightblue;
}

p:has([data-id="bar"]) {
  background-color: red;
}
    <p><span data-id="foo">Foo</span></p>
<p><span data-id="bar">Bar</span></p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search