Search code examples
csspseudo-elementpseudo-class

CSS multiple pseudo classes and pseudo elements

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

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

  • 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).