CSS Style if not children

Question

I need to apply a style to an element if a specific class is NOT a child of the element.

<table class="printlist" style="width:100%">
  <tbody>
    <tr class="list_wanted0"><td>Whatever...</td></tr>
    <tr class="list_wanted1"><td>
      <div class="journal">
        <table><tbody>
          <tr><td style="width: 9em">2011-03-12 09:36</td></tr>
        </tbody></table>
      </div>
    </td></tr>
  </tbody>
</table>

The example above is reduced to a minimum to demonstrate the structure.

What I want is to have the :Hover properties only to apply .printlist tr if <tr> has NO .journal child.

The .list_wanted0 and .list_wanted1 can not be used to select the .journal, it can be other class names there.

The CSS I have tried is:

.printlist tr:Hover * :not(itemjournal) {
  color: #000;
  background: #aaa
}

Obviously, this doesn't work as I intended to.

If you need more information, don't hesitate to ask,
Thank you.

You cannot style an ancestor depending on its children with CSS; you can use JavaScript (or a library) to apply a class-name or add styles depending on such a condition, but not with just css. — David Thomas
– David Thomas, Commented Mar 12, 2011 at 17:07

BoltClock · Accepted Answer · 2013-02-01 07:55:08Z

10

It's impossible with CSS selectors alone; you can't use CSS to determine if an element has a certain kind of child or not. Your best bet is to use JavaScript to apply classes, and style those classes accordingly instead.

An example using the jQuery-only :has() selector:

$('.printlist tr').not(':has(.journal)').addClass('nojournal');

Then apply styles to .printlist tr.nojournal:hover.

edited Feb 1, 2013 at 7:55

answered Mar 12, 2011 at 17:09

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

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

2 Comments

Evgeny Over a year ago

:empty CSS selector been around for a long time

BoltClock Over a year ago

@Eugene Xa: Of course - my answer was poorly phrased so I've edited it.

user656781 · Accepted Answer · 2011-03-12 17:27:26Z

0

Yes, unfortunately you'll need to go with a javascript-based solution such as jQuery suggested by BoltClock, especially if you want the CSS styling to be consistent across browsers, considering the fact that not all browsers implement the complete CSS standard specifications.

If you still want to go ahead with CSS-only, try looking for a cheat-sheet table of what types of CSS selectors are supported in what browsers/versions.

answered Mar 12, 2011 at 17:27

user656781

Comments

Max Kielland · Accepted Answer · 2011-03-12 17:22:42Z

-2

I got it to work

I thought I would answer my own question and present my pure CSS solution.

The solution was to create two classes and combine them in the <tr>

<table class="printlist" style="width:100%">
  <tbody>
    <tr class="list_wanted0 list_hover"><td>Whatever...</td></tr>
    <tr class="list_wanted1"><td>
      <div class="journal">
        <table><tbody>
          <tr><td style="width: 9em">2011-03-12 09:36</td></tr>
        </tbody></table>
      </div>
    </td></tr>
  </tbody>
</table>

I only needed to add a hover class:

.list_hover:Hover {
  color: #000;
  background: #aaa
}

On all <tr> rows that needs hover I combine whatever class I like with the .list_hover class and exclude it from the .journal row.

Now it works exactly as intended. Thank you for all the help.

answered Mar 12, 2011 at 17:22

Max Kielland

5,8719 gold badges63 silver badges101 bronze badges

4 Comments

BoltClock Over a year ago

That is not pure CSS since you had to modify the HTML to get it to work.

Max Kielland Over a year ago

So if I had added the hover class from the begining but didn't define the :Hover right, had it been pure CSS then? Same thing... :P

JoeBrockhaus Over a year ago

I wish you could downvote a comment. What value is CSS without markup? You can't do anything with 'pure css' if the corresponding markup is thrown out the window..

Koert van Kleef Over a year ago

Totally agree with the first comment. This 'solution' does not answer the original question. It does not "apply a style to an element if a specific class is NOT a child of the element", instead it just applies a style to a class, and that class conveniently being added as necessary without explaining how. To be fair, the OP never said it had to be pure CSS, but in fact, BoltClock's first reply does exactly what the OP's own 'answer' does, through JS. Since BoltClock's reply also provides the reasons why, it is the preferred answer.

Collectives™ on Stack Overflow

CSS Style if not children

3 Answers 3

2 Comments

Comments

I got it to work

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

I got it to work

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related