Attribute Value Selector Practice


by Jeremy Caudle
notes

It's been quite some time since I've used an exact attribute value selector or simple attribute selector in my CSS. I first ran across one when reviewing one of Eric Meyer's CSS resets. If I remember correctly, he made use of them to bring attention to imgs with empty alt properties.

The styles applied to this paragraph are the same as those that are applied to images that have an alt attribute with any value.

The styles applied to this paragraph are the same as those that are applied to images that are missing an alt attribute.

The styles applied to this paragraph are the same as those that are applied to images that have an alt attribute but no text or whitespace has been entered.

Has ALT text Has ALT text

View the code:

HTML and JS 
<section class="codedoodle-block">

        <p class="hasaltwithanyvalue">The styles applied to this paragraph are the same as those that are applied to images that <strong>have an alt attribute with any value.</strong></p>

        <p class="missingaltproperty">The styles applied to this paragraph are the same as those that are applied to images that are <strong>missing an alt attribute.</strong></p>

        <p class="hasaltpropertybutnotext">The styles applied to this paragraph are the same as those that are applied to images that <strong>have an alt attribute but no text or whitespace has been entered.</strong></p>

        <div>
            <img src="https://jeremycaudle.com/floorshotJC.jpeg" alt="Has ALT text" width="400" height="400" />
            <img src="" width="400" height="400" />
            <img src="https://jeremycaudle.com/floorshotJC.jpeg" alt="" width="400" height="400" />
            <img src="https://jeremycaudle.com/floorshotJC.jpeg" width="400" height="400" />
            <img src="" alt="" width="400" height="400" />
            <img src="" alt="Has ALT text" width="400" height="400" />
        </div>
    </section>
CSS 
/* Variables */

        :root {
            --bg-color: #000000;
            --primary-color: orange;
        }

        /* Code Block styles */

        section.codedoodle-block div {
            max-width: 600px;
            display: grid;
            margin: 1rem auto;
            grid-template-columns: 1fr 1fr 1fr;
            grid-gap: 1rem;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }

        section.codedoodle-block img {
            width: 100%;
            height: auto;
            mix-blend-mode: multiply;
            position: relative;
            text-align: center;
            vertical-align: middle;
            color: #676767;
            font-weight: bold;
            font-size: 3rem;
        }

        section.codedoodle-block img[alt], p.hasaltwithanyvalue {
            background-image: linear-gradient(0deg, #ffffff, #dddddd);
        }

        section.codedoodle-block img:not([alt]), p.missingaltproperty {
            border-bottom: solid 5px yellow;
        }

        section.codedoodle-block img[alt=""], p.hasaltpropertybutnotext {
            border-bottom: solid 5px red;
        }

Tags