How can SASS be used to emulate the use of: match (a, b) +: matches (a, b): nth-child (2)?

Question

Answering the question " CSS / SCSS Adjacent selector between separate types ," in which the OP wanted to have a second-child element of the parent element if it and the previous brother were elements of different types.

I suggested the answer using a selector matches()(although Firefox and Webkit browsers - this is at the time of writing - using implementations with a vendor prefix of a pseudo-class :any()).

In some ways, the tradition of the times of Internet Explorer and Edge does not allow to implement any version of the selector, either :any(), or :matches(), although, since this is an experimental function, I can not make the blame for this decision or the 'failure'.

However, to ensure compatibility, I would like to ask: is there a means by which SASS can be used to form appropriate selectors in order 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>

Run codeHide result

With SASS, I would expect, or at least assume, that groupings should be expanded from the following form (although I'm not sure, therefore, this question is how to emulate the syntax :matches()or what the SASS syntax can be):

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

In an explicit selector, for example:

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>

Run codeHide result

Literature:

• :any().
• :matches().
• Compatible for:matches() .

Answer 1

, , :matches, :

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

:

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

( mixin, ...)

, .

Answer 2

postcss level4. :matches CSS3.

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

/* compiles to */

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

(, ) Github 4: https://github.com/stephenway/level4.