Html Question posted in
Some basic documentation can be found here.

Html – Why does the :has pseudo selector not work with a list of elements?

I have a div block with a class "help-image" that contains an <img>, inside a section with a class "help-section".

Using the :has selector as follows works fine:

section.help-section > div:has(img),
section.help-section > div:has(figure),
section.help-section > div:has(button)
{
    background: mistyrose;
}

However, passing a list of elements (as the MDN docs suggest I can) doesn’t work at all:

section.help-section > div:has(img, button, figure)
{
    background: mistyrose;
}

I have inspected all elements with the developer tools, and the rule does not appear at all if I use the second example.

section.help-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

div.help-text,
div.help-image {
  flex: 1 0 45%;
  align-self: flex-start;
  min-width: 350px;
}

section.help-section>div:has(img, figure, button) {
  background: mistyrose;
  /* doesn't work in my output */
}
<section class="help-section">
  <div class="help-text">
    <p>This is just an example paragraph, the help-text block will only ever contain text.</p>
  </div>
  <div class="help-image">
    <img src="https://picsum.photos/200/200" />
  </div>
</section>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I use a program called MadCap Flare for publishing help documentation - it appears that this is the culprit and is breaking the CSS rule for some reason:

    section.help-section > div:has(img0002C00020figure0002C00020button)
{
    background: mistyrose;
}

  2. 0

    Since the original question changed quite a bit, my answer is no
    longer valid as I started on some wrong assumptions.

    This answer is out of scope, but I’ll leave it in case some people
    are trying to target a parent element. It can be interesting to
    learn about the :has() and the :is() new selectors.

    I quickly supposed that you wanted to set a pink background to all
    the outer <section class="help-section"> tag if one of the direct
    child <div> contained either an <img>, <button> or <figure>
    tag. If that was the case, then you could have used the
    :is()
    CSS selector:

    .help-section {
  padding: 1em;
}

.help-image {
  float: left;
  margin-right: .5em;
}

/* Set a pink background to all the help section if one of
   the direct div child contains an img, button or figure. */
.help-section:has(> div :is(img, button, figure))
{
  background: mistyrose;
}

footer {
  font-size: .8em;
}
    <section class="help-section">
  <div class="help-section-header">
    <div class="help-image">
      <img src="https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/help/default/24px.svg"
           alt="Help icon" />
    </div>
    <h2>Help section</h2>
  </div>
  
  <div class="help-section-body">
    <p>This is the help section content.</p>
  </div>
  
  <footer>
    <p>Last update: <time datetime="2024-05-15T19:00">May 15</time></p>
  </footer>
</section>

    One could also use twice the :has() selector:

    .help-section:has(> div:has(img, button, figure))
{
  background: mistyrose;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search