0

.main:has(article:nth-child(n + 2)) .role * {
font-size:55px;  
}
<div class="main">
  <article><div class="role"><span>Ruolo1</span> </div> contenuto1 </article> 
   <article><div class="role"><span>Ruolo2 </span> </div> contenuto2 </article> 
  <article><div class="role"><span>Ruolo3 </span> </div> contenuto3 </article> 
  <article><div class="role"><span>Ruolo4 </span> </div> contenuto4 </article> 

</div>

Why the CSS not working on firefox ?

The font size will be 55px for all elements except the first

Sfili_81
  • 2,377
  • 8
  • 27
  • 36
gabriele bellinari
  • 3
  • 1

2 Answers2

1

As of this moment (April 2023) Firefox does not support :has() by default.

From the support table in MDN: enter image description here

So you can test it in FF by setting the flag but if you have significant number of users on FF you may want to implement a workaround.

This snippet applies the font-size to all the articles unless there is only one article (i.e. unless the article is both the first and the last child).

/*.main:has(article:nth-child(n + 2)) .role * {
font-size:55px;  
}*/

.main article:not(:first-child:last-child) .role * {
  font-size: 55px;
}
<div class="main">
  <article>
    <div class="role"><span>Ruolo1</span> </div> contenuto1 </article>
  <article>
    <div class="role"><span>Ruolo2 </span> </div> contenuto2 </article>
  <article>
    <div class="role"><span>Ruolo3 </span> </div> contenuto3 </article>
  <article>
    <div class="role"><span>Ruolo4 </span> </div> contenuto4 </article>
</div>
A Haworth
  • 30,908
  • 4
  • 11
  • 14
0

You can see here that :has() has no support on firefox, it is supported by nearly all the other browsers.
There are some work arounds like this one: How do you enable :has() selector on Firefox. However, it is a compatibility issue and it never works as well as in other browsers.

André
  • 1,602
  • 2
  • 12
  • 26