CSS применяется, если существует 2 элемента

Question

Учитывая следующую разметку HTML, я хочу применить (S) CSS только тогда, когда существуют 2 тех же элементов (не когда существует 1).

Я не Я не хочу использовать JavaScript для подсчета количества элементов и применения другого класса, однако я считаю, что это единственный подход.

div {
  a + a {
    // I want to apply styles to both a tags, not just the second one
    // WHEN 2 a tags exists
  } 
}

<div>
  <a href="/">Home</a>
  <a href="/about">About</a>
</a>

Answer 1

Вы можете использовать «количественные запросы». Для ровно ДВА ...

a:nth-last-child(n+2):nth-last-child(-n+2):first-child, 
a:nth-last-child(n+2):nth-last-child(-n+2):first-child ~ a {

}

Источник: https://quantityqueries.com/

a:nth-last-child(n+2):nth-last-child(-n+2):first-child,
a:nth-last-child(n+2):nth-last-child(-n+2):first-child~a {
  color: red
}

<div>
  <a href="/">Home</a>
  <a href="/about">About</a>
</div>

<div>
  <a href="/">Home</a>

</div>

<div>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/more">More</a>
</div>

Answer 2

^{ОБНОВЛЕНИЕ : в первоначальном вопросе говорилось: « 2 или более одинаковых элементов существуют», но было обновлено позже ...}

Вы можете сделать это, как показано ниже:

a:first-child:nth-last-child(n + 2),
a ~ *{
  color:red;
}

<div>
  <a href="/">Home</a> <a href="/about">About</a>
</div>
<div>
  <a href="/">Home</a> <a href="/about">About</a> <a href="/">Home</a> <a href="/about">About</a>
</div>
<div>
  <a href="/">Home</a>
</div>

Или, как показано ниже:

a:not(:only-child){
  color:red; 
}

<div>
  <a href="/">Home</a> <a href="/about">About</a>
</div>
<div>
  <a href="/">Home</a> <a href="/about">About</a> <a href="/">Home</a> <a href="/about">About</a>
</div>
<div>
  <a href="/">Home</a>
</div>

Answer 3

вы используете прекомпилятор? затем

div a:nth-child(n+2) {
  background: red
}

<div>
  <a href="/">Home</a>
  <a href="/about">About</a>
</a>

Для S css следующий код должен работать

div {
   & a:nth-child(n+2) {
    // css instruction
  } 
}