Learning about a few modern CSS Pseudo Class Selectors


by Jeremy Caudle
code

I read a useful article on Smashing Magazine today that taught me about a few CSS pseudo-class selectors that I wasn’t aware of. I’ve spent a good amount of time today on a challenge involving Object Oriented JavaScript that has left my brain a little tired, so I thought I’d try out some of these selectors for practice. The link to the article can be found within the post’s HTML.

Modern CSS Pseudo-Class Selectors

:any-link

Use of this selector allows you to add basic properties to all links.

Test of selector

:empty

Matches an element when it has no child elements, including text nodes. The empty p element below should be red and have a minimum height of 1rem.

Learn about more modern CSS Pseudo-Class Selectors

Find the ones I've mentioned and more in the article, A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors by Stephanie Eckles.

View the code:

HTML and JS 
<div class="code-block">
            <h1>Modern CSS Pseudo-Class Selectors</h1>
            <h2><code>:any-link</code></h2>
            <p>Use of this selector allows you to add basic properties to all links.</p>
            <p><a href="jeremycaudle.com">Test of selector</a></p>
            <h2><code>:empty</code></h2>
            <p>Matches an element when it has no child elements, including text nodes. The empty <code>p</code> element below should be red and have a minimum height of 1rem.</code></p>
            <p></p>
            <h2>Learn about more modern CSS Pseudo-Class Selectors</h2>
            <p>Find the ones I've mentioned and more in the article, <a href="https://www.smashingmagazine.com/2021/04/guide-supported-modern-css-pseudo-class-selectors/">A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors</a> by <a href="https://thinkdobecreate.com/">Stephanie Eckles</a>.</p>
        </div>
CSS 
.code-block {
                width: 20em;
                margin: 1rem auto;
                background-color: #efefef;
                border-radius: 1rem;
                padding: 1rem;
            }

            .code-block a:any-link {
                color: black;
                text-underline-offset: 2px;
                transition: text-underline-offset .125s ease-out;
            }

            .code-block a:hover {
                text-underline-offset: 8px;
                text-decoration-color: black;
                color: blue;
            }

            .code-block p:empty {
                border: red;
                min-height: 1rem;
                background-color: red;
            }

Tags