CSS multiple pseudo classes and pseudo elements

Question

Is this CSS syntax exist and safe to use for all modern browsers.

footer ul.footer-menu li:not(:first-child):after

Answer 1

Yes it works, see the snippet below.

footer ul.footer-menu li:not(:first-child):after {
    content: 'added some text';
    color: red;
}

<footer>
    <ul class="footer-menu">
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut tempora voluptatum praesentium rem culpa, cupiditate quas animi commodi voluptates? Cupiditate error cum suscipit dolorum deleniti? Non dolore, cumque assumenda voluptatum.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut tempora voluptatum praesentium rem culpa, cupiditate quas animi commodi voluptates? Cupiditate error cum suscipit dolorum deleniti? Non dolore, cumque assumenda voluptatum.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut tempora voluptatum praesentium rem culpa, cupiditate quas animi commodi voluptates? Cupiditate error cum suscipit dolorum deleniti? Non dolore, cumque assumenda voluptatum.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut tempora voluptatum praesentium rem culpa, cupiditate quas animi commodi voluptates? Cupiditate error cum suscipit dolorum deleniti? Non dolore, cumque assumenda voluptatum.</li>
    </ul>
</footer>

And yes it is safe to use on all modern browsers. According to caniuse.com, the support is close to 98% around the world for generated content by pseudo-elements (:after), for CSS 2.1 selectors (:first-child) and CSS 3 selectors (:not).

Answer 2

Yes.

:not 97.72% Global Browser support

:first-child 97.74% Global Browser support

:after 97.72% Global Browser support

You can always find out if you can use ... here

REF: https://caniuse.com/