Skip to content

Instantly share code, notes, and snippets.

@teknixstuff
Last active May 31, 2022 22:41
Show Gist options
  • Save teknixstuff/dbb4d65413c2c9c6ec1f8dbdddd49d3b to your computer and use it in GitHub Desktop.
Save teknixstuff/dbb4d65413c2c9c6ec1f8dbdddd49d3b to your computer and use it in GitHub Desktop.
Attribute selector not working when combined with other selectors

In this code the attribute selector (at line 100, char 16) does not work with other selectors, even though I've tested and it works on it's own.

In my code, only the first and second text boxes should go green when they contain text, but the third and fourth do despite having the hidevalid tag. What is causing this?

I've tested the JS, and all is working. I've tested the SCSS compiler alone, and it works. While this doesn't need vue and tailwind, they were working fine and I will be using them, so I want to make sure the answer works with them.

Ignore the tailwind errors, I'll fix them myself later.

Please comment with a solution.

Preview

<script src="https://unpkg.com/petite-vue" defer init></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/gh/medialize/sass.js/dist/sass.sync.js"></script>
<script src="https://cdn.jsdelivr.net/gh/LeaVerou/prefixfree/prefixfree.min.js"></script>
<script>
window.addEventListener("load",(async()=>{const t=t=>new Promise(((e,n)=>Sass.compile(t,(t=>{0==t.status?e(t.text):n(t.formatted)})))),e=document.querySelectorAll('style[type="text/tailwindscss"]');for(var n=0;n<e.length;n++)e[n].innerHTML=await t(e[n].innerHTML),e[n].type="text/tailwindcss";const s=document.querySelectorAll('style[type="text/scss"]');for(n=0;n<s.length;n++)s[n].innerHTML=await t(s[n].innerHTML),s[n].type="text/css"}));
AIO={};
AIO.loadSCSS = async(url)=>{const t=t=>new Promise(((e,n)=>Sass.compile(t,(t=>{0==t.status?e(t.text):n(t.formatted)}))));var x=document.createElement('style');x.innerHTML=await t(await (await fetch(url)).text());document.head.appendChild(x);};
</script>
<script>
AIO.autostyls = {};
AIO.autostyls = ()=>{
Array.prototype.forEach.call(document.querySelectorAll('*[x-type]'),node=>{
var newElem = document.createElement(AIO.autostyls.typeswaps[node.attributes['x-type'].value].type);
Array.prototype.forEach.call(node.attributes,attrib=>{
newElem.setAttribute(attrib.name,attrib.value);
});
if (AIO.autostyls.typeswaps[node.attributes['x-type'].value].hasOwnProperty('attributes')) {
Object.entries(AIO.autostyls.typeswaps[node.attributes['x-type'].value].attributes).forEach(attrib=>{
newElem.setAttribute(attrib[0],attrib[1]);
});
}
Array.prototype.forEach.call(node.childNodes,child=>{
newElem.appendChild(child);
});
node.replaceWith(newElem);
});
};
AIO.autostyls.typeswaps = {'button': {type: 'span'}, 'textinput': {type: 'input', attributes: {'type': 'text','onkeyup': 'this.setAttribute("value", this.value);'}}};
window.addEventListener('DOMContentLoaded',AIO.autostyls);
</script>
<style type="text/tailwindscss">
:root {
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
}
[x-type|="button"] {
--main-color: hsl(195, 100%, 50%);
--dark-color: hsl(195, 100%, 25%);
--light-color: hsl(195, 100%, 65%);
transition: background-color 0.5s;
display: inline-block;
color: white;
background-color: var(--main-color);
outline: none;
border: 1px solid LightGray;
border-radius: 5px;
text-align: center;
padding: 0px 5px;
margin: 5px;
height: 1.5em;
line-height: 1.5em;
&:hover {
background-color: var(--light-color);
}
&:active {
background-color: var(--dark-color);
}
&[x-extype~="alt"] {
--main-color: hsl(0, 0%, 95%);
--dark-color: hsl(0, 0%, 90%);
--light-color: hsl(0, 0%, 98%);
color: black;
}
&[x-extype~="red"] {
--main-color: hsl(0, 100%, 50%);
--dark-color: hsl(0, 100%, 25%);
--light-color: hsl(0, 100%, 70%);
color: white;
}
&[x-extype~="green"] {
--main-color: hsl(120, 61%, 50%);
--dark-color: hsl(120, 61%, 25%);
--light-color: hsl(120, 61%, 65%);
color: white;
}
&[x-extype~="square"] {
border-radius: 0px;
}
}
[x-type|="textinput"] {
transition: background-color 0.5s;
display: inline-block;
color: black;
background-color: hsl(0, 0%, 95%);
outline: none;
border: 1px solid LightGray;
border-radius: 5px;
text-align: center;
padding: 0px 5px;
margin: 5px;
height: 1.5em;
line-height: 1.5em;
&:hover, &:focus {
background-color: hsl(0, 0%, 98%);
}
&[value]:not([x-extype~="hidevaild"]):not([value=""]):not(:focus):valid {
border: 1px solid lime;
}
&:focus {
border: 1px solid DeepSkyBlue;
}
&:invalid {
border: 1px solid red;
}
&[x-extype~="square"] {
border-radius: 0px;
}
}
</style>
<span x-type="button">Button</span>
<span x-type="button" x-extype="alt">Alternative</span>
<span x-type="button" x-extype="green">Green</span>
<span x-type="button" x-extype="red">Red</span>
<br>
<span x-type="button" x-extype="square">Square Button</span>
<span x-type="button" x-extype="square alt">Square Alternative</span>
<span x-type="button" x-extype="square green">Square Green</span>
<span x-type="button" x-extype="square red">Square Red</span>
<br>
<span x-type="textinput" placeholder="Text Input"></span>
<span x-type="textinput" x-extype="square" placeholder="Square Text Input"></span>
<span x-type="textinput" x-extype="hidevalid" placeholder="Text Input hidevalid"></span>
<span x-type="textinput" x-extype="square hidevalid" placeholder="Square Text Input hidevalid"></span>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment