Practice with the IS selector


by Jeremy Caudle
code

I’ve been hearing about the :is() for a little while now and wanted to try it out. It looks like it will be pretty useful for those times when I have an excess of selectors in the same declaration or set of declarations.

Daring Discoveries

Vivamus lacinia felis et magna auctor accumsan. Pellentesque sodales tempus felis, sed pretium nunc mollis a. Ut vulputate bibendum leo a blandit. Nunc nulla nibh, porttitor vitae ante sed, mattis gravida eros. Morbi.

Dangerous Detours

Curabitur id sapien id arcu accumsan varius in ornare ligula. Proin in porttitor velit. Vivamus a gravida lectus. Integer rutrum mi est, ac tincidunt arcu sagittis eget. Ut a lacinia massa, nec placerat lacus. Donec eu pulvinar nulla, nec fermentum leo. Ut.

Delectable Delights

Vivamus vitae imperdiet ipsum. Donec tortor massa, semper ac felis vitae, viverra varius est. Vestibulum aliquam rutrum blandit. Quisque feugiat, dui sed consectetur cursus, erat eros bibendum tortor, vel pellentesque elit turpis a mi. Vestibulum in ligula euismod, lacinia nisl vel, consequat justo. Nam euismod at mauris.

© 2021 - Random Industries

View the code:

HTML and JS 
<div class="code-block">
            <main>
                <h1>Daring Discoveries</h1>
                <p>Vivamus lacinia felis et magna auctor accumsan. Pellentesque sodales tempus felis, sed pretium nunc mollis a. Ut vulputate bibendum leo a blandit. Nunc nulla nibh, porttitor vitae ante sed, mattis gravida eros. Morbi. </p>
            </main>
            <section class="secondary-styling">
                <h2>Dangerous Detours</h2>
                <p>Curabitur id sapien id arcu accumsan varius in ornare ligula. Proin in porttitor velit. Vivamus a gravida lectus. Integer rutrum mi est, ac tincidunt arcu sagittis eget. Ut a lacinia massa, nec placerat lacus. Donec eu pulvinar nulla, nec fermentum leo. Ut. </p>
            </section>
            <section class="tertiary-styling">
            <h3>Delectable Delights</h3>
            <p>Vivamus vitae imperdiet ipsum. Donec tortor massa, semper ac felis vitae, viverra varius est. Vestibulum aliquam rutrum blandit. Quisque feugiat, dui sed consectetur cursus, erat eros bibendum tortor, vel pellentesque elit turpis a mi. Vestibulum in ligula euismod, lacinia nisl vel, consequat justo. Nam euismod at mauris. </p>
            </section>   
            <footer>
                <small>© 2021 - Random Industries</small>
            </footer>
        </div>
CSS 
.code-block {
                width: 20em;
                margin: 1rem auto;
                padding: 1rem;
                color: #eee;
                background-color: darkslategray;
            }

            .code-block :is(h1, h2, h3, p) {
                margin-bottom: .5rem;
                font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                line-height: 1.35;
            }
						
						.code-block h1 {
							font-size: 3rem;
						}

            .secondary-styling {
                margin: 5rem 0;
                padding: 2.5rem 2.5rem;
                text-align: center;
                shape-outside: circle(50%);
                background-color: yellow;

            }

            .secondary-styling :is(h2, p) {
                color: black;
            }

            .tertiary-styling {
                padding-left: 25%;
                background: linear-gradient(90deg, rgba(58,255,124, 0.5) 20%, transparent 20%);
                margin-bottom: 5rem;
            }

            .tertiary-styling :is(h3, p) {
                color: rgb(58, 255, 124);
            }

            footer { text-align: center;}

Tags