Target Pseudo-Class Practice


by Jeremy Caudle
notes

I wanted to work some more with the :target pseudo class. I also wanted to create something with a positive message. I'm not sure how to word this well, but the situation in the US makes me really sad and upset. I want to find some ways to help. So I made this, and I'm going to do more.

Good ideas

1.

Be kind.

2.

Help others. People and organizations that need help right now.

3.

Hold those who do wrong accountable.

4.

Speak up or do something (no matter how small it may seem) to help others in times of trouble. Silence and inaction can do more harm than you realize.

5.

If you are part of a system that treats you better than others, work to change the system and help those who are not treated as fairly as you.

Back to top

View the code:

HTML and JS 
<section class="codedoodle-block">
        <h1>Good ideas</h1>
    
    
        <ul class="target-nav" id="nav">
            <li><a href="#first">One</a></li>
            <li><a href="#second">Two</a></li>
            <li><a href="#third">Three</a></li>
            <li><a href="#fourth">Four</a></li>
            <li><a href="#fifth">Five</a></li>
        </ul>
    
        <div class="main">
    
            <section>
                <a name="first" class="page-anchor"></a>
                <h2>1.</h2>
                <p>Be kind.</p>
            </section>
            <section>
                <a name="second" class="page-anchor"></a>
                <h2>2.</h2>
                <p>Help others. <a href="https://blacklivesmatters.carrd.co"><em>People and organizations that need help right now.</em></a></p>
            </section>
            <section>
                <a name="third" class="page-anchor"></a>
                <h2>3.</h2>
                <p>Hold those who do wrong accountable.</p>
            </section>
            <section>
                <a name="fourth" class="page-anchor"></a>
                <h2>4.</h2>
                <p>Speak up or do something (no matter how small it may seem) to help others in times of trouble. Silence and inaction can do more harm than you realize.</p>
            </section>
            <section>
                <a name="fifth" class="page-anchor"></a>
                <h2>5.</h2>
                <p>If you are part of a system that treats you better than others, work to change the system and help those who are not treated as fairly as you. </p>
            </section>
    
        </div>
            <div class="text-center">
            <a href="#nav" >Back to top</a>
            </div>
        </section>
CSS 
/* Variables */

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

        /* Link styles */

        section.codedoodle-block a, section.codedoodle-block a:link {
            color: #fefefe;
            transition: all .33s ease-in-out;
        }

        section.codedoodle-block a:visited {
            color: #999999;
        }

        section.codedoodle-block a:active {
            font-weight: bold;
        }

        section.codedoodle-block a:focus, section.codedoodle-block a:hover {
            text-decoration-color: black;
        }

        /* General styles */


        section.codedoodle-block h1 {
            text-align: center;
            text-transform: uppercase;
        }
				
				.text-center {
            text-align: center;
            text-transform: uppercase;
						padding: 1rem;
						margin: 2rem 0;
        }

        section.codedoodle-block {
            background-color: var(--bg-color, black);
            color: #cdcdcd;
            padding: 1rem;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }

        ul.target-nav {
            padding: .5rem;
            border: solid 1px #dedede;
            margin-bottom: 1rem;
            text-align: center;
        }

        ul.target-nav li {
            display: inline;
            padding: .5rem;
            margin-right: .5rem;
        }

        div.main h2 {
            margin-bottom: 0;
            transition: all .125s ease-in-out;
            max-width: 2em;
        }

        section.codedoodle-block p {
            margin: 0;
            transition: font-weight .125s ease-in-out;
            transition: background-color .125s ease-in-out;
            transition: padding .125s ease-in-out;
        }

        /* :target Pseudo-class styles - I got to use adjacent sibling selector again too! */

        :target + h2 {
            
            font-size: .66rem;
            padding: .25rem;
            margin-top: .5rem;
            text-transform: uppercase;
            color: #121212;
            background-color: var(--primary-color, orange);
        }

        :target + h2 + p {
            font-size: 1.5rem;
            font-weight: bold;
            background: var(--primary-color, orange);
            color: #121212;
            padding: 1rem;
        }

        :target + h2 + p > a {
            color: #121212;
        }

Tags