CODEWITHSUNDEEP
csscss-selectors
Max Kielland
Max Kielland

Reputation: 5841

CSS Style if not children

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.

Upvotes: 5

Views: 12509

Answers (3)

BoltClock
BoltClock

Reputation: 723498

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.

Upvotes: 10

user656781
user656781

Reputation:

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.

Upvotes: 0

Max Kielland
Max Kielland

Reputation: 5841

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.

Upvotes: -2

Related Questions