4

In answering the question "CSS/SCSS Adjacent sibling selector between certain types," in which the OP wanted to have the second-child of a parent-element styled if it, and the preceding sibling, was an element of various types.

I proposed an answer using the matches() selector (albeit both Firefox and Webkit browsers are – at the time of writing – using vendor-prefixed implementations of the :any() pseudo-class).

Somewhat as a tradition of times gone by both Internet Explorer and Edge fail to implement any version of the selector, either :any() or :matches(), although since it's an experimental feature I can't attach blame for that decision or 'failure.'

However, for compatibility's sake I'd like to ask: is there a means by which SASS might be used to form the appropriate selectors to reliably style the following:

a::before {
  content: 'link';
}
span::before {
  content: 'span';
}
b::before {
  content: 'b';
}
em::before {
  content: 'em';
}
:-webkit-any(a, b, span) + :-webkit-any(a, b, span):nth-child(2) {
  color: #f90;
}
:-moz-any(a, b, span) + :-moz-any(a, b, span):nth-child(2) {
  color: #f90;
}
:matches(a, b, span) + :matches(a, b, span):nth-child(2) {
  color: #f90;
}
<div>
  <h2>The second element child of each of these following &lt;div&gt; elements should be styled</h2>
  <div>
    <span></span>
    <a href="#"></a>
  </div>
  <div>
    <a href="#"></a>
    <span></span>
  </div>
  <div>
    <a href="#"></a>
    <span></span>
    <span></span>
  </div>
</div>
<div>
  <h2>The second element child of each of these following &lt;div&gt; elements should <em>not</em> be styled</h2>
  <div>
    <a href="#"></a>
    <em></em>
  </div>
  <div>
    <em></em>
    <a href="#"></a>
  </div>
</div>

With SASS I'd expect, or at least imagine, that the groupings should be expanded from the following form (though I'm unsure, hence this question, as to how to emulate the :matches() syntax or what the SASS syntax might be):

:matches(a, b, span) + :matches(a, b, span):nth-child(2) {
  color: #f90;
}

Into an explicit selector, such as:

a + a:nth-child(2),
a + b:nth-child(2),
a + span:nth-child(2),
b + a:nth-child(2),
b + b:nth-child(2),
b + span:nth-child(2),
span + a:nth-child(2),
span + b:nth-child(2),
span + span:nth-child(2) {
  color: #f90;
}

a::before {
  content: 'link';
}
span::before {
  content: 'span';
}
b::before {
  content: 'b';
}
em::before {
  content: 'em';
}
a + a:nth-child(2),
a + b:nth-child(2),
a + span:nth-child(2),
b + a:nth-child(2),
b + b:nth-child(2),
b + span:nth-child(2),
span + a:nth-child(2),
span + b:nth-child(2),
span + span:nth-child(2) {
  color: #f90;
}
<div>
  <h2>The second element child of each of these following &lt;div&gt; elements should be styled</h2>
  <div>
    <span></span>
    <a href="#"></a>
  </div>
  <div>
    <a href="#"></a>
    <span></span>
  </div>
  <div>
    <a href="#"></a>
    <span></span>
    <span></span>
  </div>
</div>
<div>
  <h2>The second element child of each of these following &lt;div&gt; elements should <em>not</em> be styled</h2>
  <div>
    <a href="#"></a>
    <em></em>
  </div>
  <div>
    <em></em>
    <a href="#"></a>
  </div>
</div>

References:

2
  • Scratch that, I misunderstood your question lol.
    – BoltClock
    Jan 3, 2017 at 14:32
  • I had wondered if I'd phrased it really badly... Although I do understand your initial (now deleted) point: it does seem a little backward. But, as I think you've realised, it's less less about using a preprocessor to emulate a selector which itself was designed/created to avoid preprocessors, but instead to recreate the convenience of :matches() in browsers that don't yet understand that selector. :) Jan 3, 2017 at 14:36

2 Answers 2

1

This could be a solution, not as concise as using :matches, but near enough:

a, b, span {
    & + a, & + b, & + span {
        &:nth-child(2) {
            color: #f90;
        }
   }
}

Another one would be to explicitly do the expanding loops:

$tags: a, b, span;
@each $a in $tags {
   @each $b in $tags {
        #{$a} + #{$b}:nth-child(2) {
            color: #f90;
        }
   }
}

(which could also be written using a mixin, but that wouldn't make it look much better...)

But really at this point I would work upstream to ensure there's a class instead of those 3 tags.

7
  • While that works I must admit that I was hoping for something that didn't involve the & + a, & + b, & + span stage; although I do love the brevity of the final brace. Jan 3, 2017 at 14:20
  • I'm looking for a better solution... But you know just like me that any sane developer would use classes to avoid that type of mess... Jan 3, 2017 at 14:25
  • I'm with you on that, yes; although for the purposes of this question I'm more curious about the syntax problem - since I've looked at the SASS documentation but never used it, and it feels like a problem that wasn't quite solved and an answer I'd like to see :) Jan 3, 2017 at 14:27
  • That looks...well 'beautiful' isn't the word, certainly, but it looks convincingly like the solution I'm looking for. I'll give it a while before I accept an answer, though, if only to see what (potential, hypothetical) other answers might be. Jan 3, 2017 at 14:39
  • I didn't look at the source code of sass but if I seriously had this problem I would consider doing a PR to just implement :matches directly into sass. Jan 3, 2017 at 14:41
0

You can use postcss with the level4 plugin. This will transform :matches to their equivalent CSS3 queries.

li:matches(:last-child, .fancy) { ... }

/* compiles to */

li:last-child, li.fancy { ... }

Documentation and examples (such as the above) can be found on the Github page of level4: https://github.com/stephenway/level4.

1
  • I like how that project lists custom properties and custom selectors as "level 4" features. (I get custom media queries because they were part of MQ L4 before being punted to L5 sometime last year, long after the project was last updated.)
    – BoltClock
    Jan 6, 2017 at 8:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.