CodeLeom/pseudo-class.html

## pseudo-class.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
    <style>
       a:hover {
        background: black;
        color: white;
        text-decoration: none;
       }

       .btn:active {
        transform: scale(0.99);
        box-shadow: none;
       }
       :focus {
        outline: none;
       }
       a:focus-visible{
        outline: 1px dashed black;
        outline-offset: 2px;
       }
       .button:focus{
        outline: 2px dotted blue;
        outline-offset: 2px;
        background-color: skyblue;
       }

       .helper {
        display: none;
       }
       :focus-within .helper{
        display: block;
       }

       .steph:focus {
        outline: 2px dashed tomato;
        outline-offset: 2px;
        background-color: black;
       }

       .helper {
        font-weight: bold;
        padding: 0.5rem 0;
       }

/* wednesday class addition */
       button:disabled {
        background: gray;
        border-color: gray;
        cursor: not-allowed;
       }
       button:enabled{
        border: 3px solid gold;
        cursor: pointer;
       }
       button:enabled:hover{
        background-color: blue;
       }
       button:disabled:hover{
        box-shadow: none;
       }

       :checked {
        box-shadow: 0px 0px 5px 2px gold;
       }
       /* .fclc > p:first-child{
        background-color: lightskyblue;
        font-weight: 800;
       }
       .fclc > p:last-child{
        background-color: lightgrey;
        font-weight: 800;
       } */
       .fclc > p:nth-child(2n + 2){
        background-color: rgb(221, 104, 104);
        font-weight: 800;
       }
       .fclc > p:nth-child(2n + 1){
        background-color: rgb(35, 28, 28);
        color: yellowgreen;
        font-weight: 800;
       }

       li:only-child{
        background-color: lightsalmon;
       }

       h2:first-of-type{
        width: 300px;
        text-align: center;
        border: 2px solid black;
        margin: 2px;
        padding: 5px;
        text-transform: capitalize;
       }
       h2:last-of-type{
        width: 300px;
        border: 2px solid green;
        margin: 2px;
        padding: 5px;
        text-transform: uppercase;
       }

       strong:only-of-type{
        background-color: darkblue;
        color: yellow;
        border: 1px solid white;
        padding: 1px;
        margin:2px;
       }
    </style>
</head>
<body>
    <h1>Pseudo Classes</h1>

    <h3>:hover pseudo class</h3>
    <p>
        this is a link: <a href="!#">Hover over me</a>
    </p>

    <h3>:active pseudo class</h3>
    <button class="btn">Click or click and Hold to see wonder</button>

    <h3>:focus :focus-within :focus-visible</h3>
    <button class="button">Use your tab key to focus this button</button>
<hr>
    <div>
        <button class="steph">
            use your tab to focus here again!
        </button>

        <div class="helper">
            click this button for a Surprise
        </div>
    </div>
<!-- wednesday class addition -->
    <h2>Form State</h2>
    <h3>:disabled :enabled</h3>

    <div>
        <button disabled>Click Me</button>
        <button>Oreofe</button>
    </div>

    <h2>:checked pseudo class</h2>
    <label>
        <input type="checkbox" name="male" id="male"> Check me
    </label>
    <label>
        <input type="checkbox" name="male" id="male"> Check me Again
    </label>

    <h2>Selecting Element by Index, Order & Occurence</h2>
    <div>
        <ul>
            <li>:first-child</li>
            <li>:last-child</li>
            <li>:nth-child</li>
        </ul>
        <div class="fclc">
            <p>I am Oreofe Lawanson</p>
            <p>I am Oreofe Lawanson</p>
            <p>I am Oreofe Lawanson</p>
            <p>I am Oreofe Lawanson</p>
            <p>I am Oreofe Lawanson</p>
            <p>I am Oreofe Lawanson</p>
            <p>I am Oreofe Lawanson</p>
            <p>I am Oreofe Lawanson</p>
        </div>
        <ul>
            <li>Oreofe is here</li>
        </ul>


        <ul>
            <li>:only-child</li>
            <li>:first-of-type</li>
            <li>:last-of-type</li>
            <li>:only-of-type</li>
        </ul>
    </div>
    <h2>Other Pseudo Classes</h2>
    <p>We are trying to explain <strong>only-of-type</strong> but Oreofe said it is <i>Lonely</i></p>

    <h2>Read More</h2>
    <ol>
        <li>Pseudo Element/Class</li>
        <li>Borders</li>
        <li>Shadows</li>
        <li>Focus</li>
    </ol>

    <script>
        document.querySelector('button').addEventListener('click', () => alert('I am not Stephanie, I am just an HTML element!'));
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Pseudo Classes</title>
	<style>
	a:hover {
	background: black;
	color: white;
	text-decoration: none;
	}

	.btn:active {
	transform: scale(0.99);
	box-shadow: none;
	}
	:focus {
	outline: none;
	}
	a:focus-visible{
	outline: 1px dashed black;
	outline-offset: 2px;
	}
	.button:focus{
	outline: 2px dotted blue;
	outline-offset: 2px;
	background-color: skyblue;
	}

	.helper {
	display: none;
	}
	:focus-within .helper{
	display: block;
	}

	.steph:focus {
	outline: 2px dashed tomato;
	outline-offset: 2px;
	background-color: black;
	}

	.helper {
	font-weight: bold;
	padding: 0.5rem 0;
	}

	/* wednesday class addition */
	button:disabled {
	background: gray;
	border-color: gray;
	cursor: not-allowed;
	}
	button:enabled{
	border: 3px solid gold;
	cursor: pointer;
	}
	button:enabled:hover{
	background-color: blue;
	}
	button:disabled:hover{
	box-shadow: none;
	}

	:checked {
	box-shadow: 0px 0px 5px 2px gold;
	}
	/* .fclc > p:first-child{
	background-color: lightskyblue;
	font-weight: 800;
	}
	.fclc > p:last-child{
	background-color: lightgrey;
	font-weight: 800;
	} */
	.fclc > p:nth-child(2n + 2){
	background-color: rgb(221, 104, 104);
	font-weight: 800;
	}
	.fclc > p:nth-child(2n + 1){
	background-color: rgb(35, 28, 28);
	color: yellowgreen;
	font-weight: 800;
	}

	li:only-child{
	background-color: lightsalmon;
	}

	h2:first-of-type{
	width: 300px;
	text-align: center;
	border: 2px solid black;
	margin: 2px;
	padding: 5px;
	text-transform: capitalize;
	}
	h2:last-of-type{
	width: 300px;
	border: 2px solid green;
	margin: 2px;
	padding: 5px;
	text-transform: uppercase;
	}

	strong:only-of-type{
	background-color: darkblue;
	color: yellow;
	border: 1px solid white;
	padding: 1px;
	margin:2px;
	}
	</style>
	</head>
	<body>
	<h1>Pseudo Classes</h1>

	<h3>:hover pseudo class</h3>
	<p>
	this is a link: <a href="!#">Hover over me</a>
	</p>

	<h3>:active pseudo class</h3>
	<button class="btn">Click or click and Hold to see wonder</button>

	<h3>:focus :focus-within :focus-visible</h3>
	<button class="button">Use your tab key to focus this button</button>
	<hr>
	<div>
	<button class="steph">
	use your tab to focus here again!
	</button>

	<div class="helper">
	click this button for a Surprise
	</div>
	</div>
	<!-- wednesday class addition -->
	<h2>Form State</h2>
	<h3>:disabled :enabled</h3>

	<div>
	<button disabled>Click Me</button>
	<button>Oreofe</button>
	</div>

	<h2>:checked pseudo class</h2>
	<label>
	<input type="checkbox" name="male" id="male"> Check me
	</label>
	<label>
	<input type="checkbox" name="male" id="male"> Check me Again
	</label>

	<h2>Selecting Element by Index, Order & Occurence</h2>
	<div>
	<ul>
	<li>:first-child</li>
	<li>:last-child</li>
	<li>:nth-child</li>
	</ul>
	<div class="fclc">
	<p>I am Oreofe Lawanson</p>
	<p>I am Oreofe Lawanson</p>
	<p>I am Oreofe Lawanson</p>
	<p>I am Oreofe Lawanson</p>
	<p>I am Oreofe Lawanson</p>
	<p>I am Oreofe Lawanson</p>
	<p>I am Oreofe Lawanson</p>
	<p>I am Oreofe Lawanson</p>
	</div>
	<ul>
	<li>Oreofe is here</li>
	</ul>


	<ul>
	<li>:only-child</li>
	<li>:first-of-type</li>
	<li>:last-of-type</li>
	<li>:only-of-type</li>
	</ul>
	</div>
	<h2>Other Pseudo Classes</h2>
	<p>We are trying to explain <strong>only-of-type</strong> but Oreofe said it is <i>Lonely</i></p>

	<h2>Read More</h2>
	<ol>
	<li>Pseudo Element/Class</li>
	<li>Borders</li>
	<li>Shadows</li>
	<li>Focus</li>
	</ol>

	<script>
	document.querySelector('button').addEventListener('click', () => alert('I am not Stephanie, I am just an HTML element!'));
	</script>
	</body>
	</html>