<html>
<head>
<title>Pseudo CSS - RJM Programming - August, 2026 ... thanks to https://www.w3schools.com/css/css_pseudo_classes.asp and https://www.w3schools.com/css/css_pseudo_elements.asp</title>

<script type=text/javascript>

function anal(osel) {
var wiys='';
if (document.getElementById('selclass').value == '?') {
wiys=prompt('Enter your own selector pseudo-class?', ':hover');
if (wiys == null) { wiys=''; }
if (document.getElementById('selclass').innerHTML.indexOf('>' + wiys + '<') != -1 && wiys.trim() != '') {
document.getElementById('selclass').value=wiys;
} else if (wiys.trim().indexOf(':') == 0) {
document.getElementById('selclass').innerHTML+='<option value="' + wiys.trim() + '">' + wiys.trim() + '</option>';
document.getElementById('selclass').value=wiys.trim();
} else {
document.getElementById('selclass').value='';
osel.value='';
return '';
}
}
if (document.getElementById('selthing').value == '?') {
wiys=prompt('Enter your own selector?', '*');
if (wiys == null) { wiys=''; }
if (document.getElementById('selthing').innerHTML.indexOf('>' + wiys + '<') != -1 && wiys.trim() != '') {
document.getElementById('selthing').value=wiys;
} else if (wiys.trim() != '') {
document.getElementById('selthing').innerHTML+='<option value="' + wiys.trim() + '">' + wiys.trim() + '</option>';
document.getElementById('selthing').value=wiys.trim();
} else {
document.getElementById('selthing').value='div';
osel.value='';
return '';
}
}
if (document.getElementById('selorand').value == 'and') {
if (document.getElementById('selclass').value == '' || document.getElementById('selelement').value == '') {
return '';
}
}
document.getElementById('dstyle').innerHTML+='<style> ' + document.getElementById('selthing').value + document.getElementById('selclass').value.trim() + document.getElementById('selelement').value + ' { ' + (document.getElementById('degval').value.trim() != '' ? document.getElementById('degval').value : document.getElementById('degval').placeholder) + ' } </style>' + String.fromCharCode(10);
document.getElementById('myta').value=document.getElementById('dstyle').innerHTML;
document.getElementById('mydet').style.display='block';
osel.value='';
document.getElementById('selclass').value='';
document.getElementById('selelement').value='';
if (document.getElementById('degval').value.trim() != '') {
document.getElementById('degval').placeholder=document.getElementById('degval').value;
document.getElementById('degval').value='';
}
}

</script>
<style>
select { width: 65px; }
input { width: 145px; }
#selorand { width: 45px; }
#selclass { width: 55px; background-color: yellow; }
#selelement { background-color: yellow; }
</style>
</head>
<body>
<h1 class=header id=myh1>Pseudo CSS</h1>
<h3 class=header id=myh3>RJM Programming - August, 2026 ... thanks to <a target=_blank href='https://www.w3schools.com/css/css_pseudo_classes.asp'>W3</a><a target=_blank href='https://www.w3schools.com/css/css_pseudo_elements.asp'>schools</a></h3>
<p class=interactives id=myp>Onto <select onchange="if (this.value.trim() == '') { this.value='div'; }" id=selthing title='CSS Selector'>
<option value='div'>div</option><option value='p'>p</option><option value='h1'>h1</option><option value='h3'>h3</option><option value='details'>details</option><option value='*'>*</option><option value=' '>---------</option>
<option value='.header'>.header</option><option value='.interactives'>.interactives</option><option value='.guineapig'>.guineapig</option><option value='.reporting'>.reporting</option><option value=' '>---------</option>
<option value='div.guineapig'>div.guineapig</option><option value='h3.header'>h3.header</option><option value='div.guineapig'>div.guineapig</option><option value='details.reporting'>details.reporting</option><option value=' '>---------</option>
<option value='.interactives a'>.interactives a</option><option value='p > select'>p > select</option><option value='h1 + h3'>h1 + h3</option><option value='p ~ input'>p ~ input</option><option value=' '>---------</option>
<option value='div, p'>div, p</option><option value='h1, h3'>h1, h3</option><option value='select, input'>select, input</option>
<option value='input[type=text]'>input[type=text]</option><option value='?'>?</option></select> use pseudo <select title='Pseudo-class' id=selclass onchange=anal(this);>
<option value=''>class</option><option value=' '></option>
<option value=':active'>:active</option><option value=':any-link'>:any-link</option><option value=':auto-fill'>:auto-fill</option>
<option value=':checked'>:checked</option><option value=':default'>:default</option><option value=':defined'>:defined</option>
<option value=':dir(rtl)'>:dir(rtl)</option><option value=':disabled'>:disabled</option><option value=':empty'>:empty</option>
<option value=':enabled'>:enabled</option><option value=':first'>:first</option><option value=':first-child'>:first-child</option>
<option value=':first-of-type'>:first-of-type</option><option value=':focus'>:focus</option><option value=':focus-visible'>:focus-visible</option>
<option value=':focus-within'>:focus-within</option><option value=':fullscreen'>:fullscreen</option><option value=':has(+p)'>:has(+p)</option>
<option value=':hover'>:hover</option><option value=':in-range'>:in-range</option><option value=':indeterminate'>:indeterminate</option>
<option value=':invalid'>:invalid</option><option value=':is(input)'>:is(input)</option><option value=':lang(en)'>:lang(en)</option>
<option value=':last-child'>:last-child</option><option value=':last-of-type'>:last-of-type</option><option value=':left'>:left</option>
<option value=':link'>:link</option><option value=':modal'>:modal</option><option value=':not(p)'>:not(p)</option>
<option value=':nth-child(1)'>:nth-child(1)</option><option value=':nth-last-child(1)'>:nth-last-child(1)</option><option value=':nth-last-of-type(1)'>:nth-last-of-type(1)</option>
<option value=':nth-of-type(1)'>:nth-of-type(1)</option><option value=':only-child'>:only-child</option><option value=':only-of-type'>:only-of-type</option>
<option value=':optional'>:optional</option><option value=':out-of-range'>:out-of-range</option><option value=':placeholder-shown'>:placeholder-shown</option>
<option value=':popover-open'>:popover-open</option><option value=':read-only'>:read-only</option><option value=':read-write'>:read-write</option>
<option value=':required'>:required</option><option value=':right'>:right</option><option value=':root'>:root</option>
<option value=':scope'>:scope</option><option value=':state()'>:state()</option><option value=':target'>:target</option>
<option value=':user-invalid'>:user-invalid</option><option value=':user-valid'>:user-valid</option><option value=':valid'>:valid</option>
<option value=':visited'>:visited</option><option value=':where(p)'>:where(p)</option><option value='?'>?</option>
</select> <select title='Pseudo-element' id=selorand><option value='or'>or</option><option value='and'>and</option></select> <select id=selelement onchange=anal(this);>
<option value=''>element</option><option value='::first-line'>::first-line</option><option value='::first-letter'>::first-letter</option><option value='::before'>::before</option><option value='::after'>::after</option><option value='::marker'>::marker</option>
<option value='::selection'>::selection</option><option value='::backdrop'>::backdrop</option>
</select> via CSS <input title='CSS styling clause innards' onblur="if (this.value.trim() != '' && this.value.trim().slice(-1) != ';') { this.value=this.value.trim() + ';'; }" placeholder="border: 3px solid red;" id=degval type=text value=''></input> styling</p>
<div class=guineapig id=dtop contenteditable=true onblur=remember(this); title="Editable, with purple outline, by default" style="background-color:white;width:33%;height:33%;position:absolute;top:33%;left:33%;display:inline-block;border:2px dotted green;outline:34px solid purple;text-align:center;opacity:0.7;"><br><br><br>My Outline is Purple<br>... and this is my second line</div>
<details class=reporting id=mydet style=display:none;width:95%;><summary id=mysum>CSS Styling for Pseudo Classes and Pseudo Elements</summary><textarea id=myta style=width:90%;height:500px;background-color:transparent;></textarea></details>
<div id=dstyle></div>
</body>
</html>