Question 45776 in CSS Question posted in
Some basic documentation can be found here.

Pseudoselector :has not work on firefox but works on chrome and Opera – CSS

.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

Tags:

2

Answers


  1. 0

    You can see here in 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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search