CSS / SCSS Adjacent selector between individual types

Question

Is there a way to execute all combinations of selectors without writing them one at a time?

Let's say I want font-size: 30px;in the second element, and any element can be a, bor span.

I would usually write:

a + b, b + a, a + span, span + a, b + span, span + b {
  font-size: 30px;
}

But this leads to combinations n*(n-1)!

I am looking forward to something like this:

{a,b,span} + {a,b,span} {
  font-size: 30px;
}

Although, if there is no alternative, let me know if the best choice is to always ensure that the contained elements are always the types that I want, so I can use *:

* + * {...}

A CSS solution, if possible, or SCSS, if it results in a cleanup or the only unique solution possible.

Edit:

nth-child. , ( , , ).

div , . :.

<div class="text">
  <span>The weather</span> <i>is</is> <img src... /> <b>nice</b> <span>today</span>
</div>

, , <div class="whatever">, div . , - { span, i, b } .

Answer 1

(sigh...) :

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

:nth-child(2), <a>, <b> <span>, <a>, <b> <span>.

, , , " ", IE Edge . , Webkit (Chrome, Opera Android) :-webkit-any(). , , Safari, , iOS, - :matches().

, IE/Edge, :

:-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;
}

a::before {
  content: 'link';
}
b::before {
  content: 'bold'
}
span::before {
  content: 'span';
}
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>
  <a href="#"></a> <span></span>
</div>
<div><span></span>
  <a href="#"></a>
</div>
<div><b></b>  <span></span>
</div>
<div><b></b>
  <a href="#"></a>
</div>
<div><b></b>  <em></em>
</div>
<div><em></em>
  <a href="#"></a>
</div>

Hide result

JS Fiddle demo.

:

• :any().
• :matches().
• :matches().

Answer 2

,

a *:nth-child(2), b *:nth-child(2) {
  font-size: 30px;
}