Style an element only when there is no h1 sibling element

Question

I have two sets of markup on my page:

<div class="row">
    <div>Some random div(s)</div>
    <table></table>
</div>

and

<div class="row">
    <div>Some random div(s)</div>
    <h1>Table Title</h1>
    <table></table>
</div>

I would like to apply margin-top and some other CSS customizations to div.row > table when there is no h1 in div.row. For example, in the above markup the first table would be styled but the second would not.

I can't find a convenient way to setup a rule for that set of conditions. I'm quite new to SASS and don't want to have to add a specific class to the table element.

Do you have any tips on what to do to achieve this?

Does the `h1` always come directly before the `table`? – Hidden Hobbes Feb 06 '17 at 21:22 — Hidden Hobbes, Feb 06 '17 at 21:22
When there is a h1 yes – BlackHoleGalaxy Feb 07 '17 at 03:04 — BlackHoleGalaxy, Feb 07 '17 at 03:04

score 2 · Answer 1 · edited May 23 '17 at 10:29

SASS ultimately compiles down to CSS, and according to the CSS rules, such a selector is not possible. You will have to do it via scripting (javascript, jQuery). There have been a lot of questions about this. Check these references:

Apply CSS styles to an element depending on its child elements

CSS selector for “foo that contains bar”?

Is there a CSS parent selector?

Finally, check this link for the reasons why we don't have the parent selector option.

score 2 · Accepted Answer · answered Feb 07 '17 at 08:55

As you are looking to style a table which always appears after an adjacent h1 element this is achievable in CSS by using a combination of the :not() and next-sibling (+) selectors.

.row > :not(h1) + table

The rule will match any table element which is directly preceded by an element which is not an h1 which is an immediate child of an element with the class .row.

.row > :not(h1) + table {
  border: 1px solid blue;
  margin-top: 10px;
}

<div class="row">
  <div>Some random div(s)</div>
  <table>
    <tr>
      <td>This will match the rule</td>
    </tr>
  </table>
</div>
<div class="row">
  <div>Some random div(s)</div>
  <h1>Table Title</h1>
  <table>
    <tr>
      <td>This will not match the rule</td>
    </tr>
  </table>
</div>

Thanks, it does the job as expected. Didn't thought about `:not()` selector. — BlackHoleGalaxy, Feb 07 '17 at 11:54

Style an element only when there is no h1 sibling element

2 Answers2