Why does ":is()" selector in CSS not seem to work?

Question

I can't figure out why :is() selector isn't working in any of the ways I try. It just doesn't seem to respond, so I'm bound to use these silly selector lists-

#top-section a:first-of-type:hover, #download-section a:first-of-type:hover,
#top-section a:last-child:hover, #download-section a:last-child:hover {
    opacity: .8;
    transition: opacity .2s ease;
}

I used the syntax just as mentioned on the documentations but can't figure out what's wrong-

:is(#top-section, #download-section) a:first-of-type:hover,
:is(#top-section, #download-section) a:last-child:hover {
    opacity: .8;
    transition: opacity .2s ease;
}

Answer 1

First of all, this selector is future proposal and we will need to wait quite some time until it will be supported by all major browsers. For now most powerful thing for such cases (and overall CSS clarity and maintenance) is CSS preprocessor such as SASS.

You could easily achieve the same with SCSS syntax (using SASS preprocessor). Code would look like this:

#top-section, #download-section{
    a:first-of-type:hover, a:last-child:hover{
       opacity: .8;
       transition: opacity .2s ease;
    }
}

Preprocessor would do all the dirty work for you and compile this code to:

#top-section a:first-of-type:hover, #top-section a:last-child:hover, #download-section a:first-of-type:hover, #download-section a:last-child:hover {
   opacity: 0.8;
   transition: opacity 0.2s ease;
}

You can install it as easy as npm install -g sass and setup file watcher to compile sass to css automatically on every change.

If you still don't want to use css preprocessor, cleaner approach would be to use classes instead of id selectors.