CSS multiple parent selector

Question

I would change the CSS rule for the background to li.li-class if it contain an h3. I have an HTML like this:

<div class="div-class">
    <ul>
        <li class="li-class">
            <span itemprop="something">
                <h3>Some title</h3>
            </span>
        </li>
    </ul>
</div>

and the CSS for li background is:

.div-class ul li:nth-child(2n+1) {  background: #f4f4f4; }

Where is the CSS selector for the li.li-class?

I have look this question Is there a CSS parent selector? and i try the code, but not work in this case. Thanks all

The question you link to explicitly states that the behaviour you desire is not possible, unfortunately. (For posterity: http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Serlite, Nov 23 '16 at 20:24
would you perhaps be creating this html/css with a server side language? if so, you could test for the h3 contents and add a class to the li. — WEBjuju, Nov 23 '16 at 20:25
Thank you @Serlite , you think this is possible by javascript? — kampageddon, Nov 23 '16 at 20:36
Absolutely possible by JS! Jake gives a pretty good suggestion in his answer (if you're not adverse to jQuery, of course). — Serlite, Nov 23 '16 at 20:38
Thanks @WEBjuju , yes the HTML code is created by php, but I do not believe it is possible to give a CSS rule, because I do not know which of the
@Serlite i like jQuery, :-) but I thought I did not use it to be lighter on the web page. But i think it is a good idea! Thanks!!! — kampageddon, Nov 23 '16 at 20:47
@kampageddon If this would be the only thing you loaded jQuery for, then maybe it would be a bit much - for a pure JS solution, you can try out [`Node.contains`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains). — Serlite, Nov 23 '16 at 20:53

Jake · Accepted Answer · 2016-11-23T20:48:39.197

As mentioned in comments, this is not possible using pure CSS.

It would however be very straight forward using the jQuery .has():

$("li").has("h3").addClass("yellow");

For the HTML:

<style>
.yellow{
  background-color:yellow;
}
</style>    
<div class="div-class">
  <ul>
    <li class="li-class">
      <span itemprop="something">
        <h3>Some title</h3>
      </span>
    </li>
    <li class="li-class">
      <span itemprop="something">
        <p>
          Not a header
        </p>
      </span>
    </li>
  </ul>
</div>

Will look at every li element and if it has a descendant h3 element it will add the yellow class to the li.

JSFiddle example

You can also make the selector more specific, so it does not select all lis but only the ones in a <div class="div-class"> with something like

$("div.div-class").find("li").has("h3").addClass("yellow");

Just a moment... I'm trying this code, I will edit this comment in a moment. — kampageddon, Nov 23 '16 at 20:56
Exactly @Jake ! Your code has soled my problem. I used this: $("div.div-class").find("li").has("h3").addClass("yellow"); This is the way! Unfortunately my problem is not solvable by CSS. Thanks All for comment, idea and solution! — kampageddon, Nov 23 '16 at 21:15

score 1 · Answer 2 · answered Nov 23 '16 at 20:43

1

If you are creating the html via php you have ultimate control:

<?php
  $html = '';
  foreach ($rows as &$row) {

    // just figure out if you need the class
    // before making the html - php is power

    if (!empty($row['h3'])) {
      $lih3_class = 'h3-in-li';
    } else {
      $lih3_class = '';
    }

    $html .= '<li class="li-class '.$lih3_class.'">';
    $html .= ''; // put in your li contents as normal
    $html .= '</li>';

  }
  echo $html;
?>

answered Nov 23 '16 at 20:43

WEBjuju

4,597
3
20
33

I forgot one important detail: the php code is very complex, so I'd rather not editarlo.Ma I think that this solution will solve my problem! – kampageddon Nov 23 '16 at 20:51

CSS multiple parent selector

2 Answers2