4 ms·

The form/valid one is very interesting but I'm not sure I completely follow, especially the last example. Would you be able to post a Codepen?

inopinatus 5y ago
Done. I've posted a sample usage, it's in a reply to a comment a bit further down.
e12e 5y ago
I'm assuming the input is toggled via js (or server rendered html) - and the selector is used for cascading "state" into the html?
eyelidlessness 5y ago
Since it just finally made sense to me... it’s basically the checkbox hack but without a sibling structure requirement. Given markup like this: <form id="foo"></form> <div class="target">...</div> <div class="doesnt-matter"> <input type="checkbox" form="foo" required> </div> You can target `.target` with: #foo:invalid ~ .target Because the checkbox is required/unchecked. (And the inverse if it’s checked using `:valid`.)
- lenkite 5y ago
  Ok, this is a great hack - but what would one practically use this for ? I mean the standard checkbox hack works too right ? Or is there some place where this technique excels ?
  - deleted 5y ago
    [deleted]
  - inopinatus 5y ago
    There are two bonus capabilities from using the form:valid hack: 1. The input element(s) can now be anywhere on the page. You can, for example, use adjacency to style a control button, without torturing your HTML to squeeze the button into being a sibling of whatever it's activating. 2. You can use form:valid as a parent selector i.e. as a wrapper element. You couldn't use an input:checked as a parent selector because the <input> element's content model is "nothing" i.e. there are no child elements under an <input>, but you sure can with a <form>. The result is less brittle to code-rot. This is extremely freeing and allows you to use, for example, a :checked adjacency for styling an activation button and a wrapper element (a form:valid) for the large complex component (modal? drop-down? slideover? video content?) that it activates. Heck, it can even be an iframe. Here's the bones of an example: https://codepen.io/inopinatus/pen/vYxrOeR?editors=1100 https://codepen.io/inopinatus/pen/vYxrOeR?editors=1100 There are two downsides: 1. Behaviour of some elements is different inside a <form>. Most obviously, don't nest a <form> inside with the same scope. 2. Your HTML maybe become a mess of scattered <form>, <input>, and <label> elements that many other developers will look at and say "WTF was this person thinking" and "what does this button do?"
  - eyelidlessness 5y ago
    I would use it where I don’t have full control over the document structure (for example where my checkbox can’t sibling select because something third party wraps it in a div).

inopinatus 5y ago

Done. I've posted a sample usage, it's in a reply to a comment a bit further down.

e12e 5y ago

I'm assuming the input is toggled via js (or server rendered html) - and the selector is used for cascading "state" into the html?

eyelidlessness 5y ago

Since it just finally made sense to me... it’s basically the checkbox hack but without a sibling structure requirement. Given markup like this: <form id="foo"></form> <div class="target">...</div> <div class="doesnt-matter"> <input type="checkbox" form="foo" required> </div> You can target `.target` with: #foo:invalid ~ .target Because the checkbox is required/unchecked. (And the inverse if it’s checked using `:valid`.)

lenkite 5y ago
Ok, this is a great hack - but what would one practically use this for ? I mean the standard checkbox hack works too right ? Or is there some place where this technique excels ?
- deleted 5y ago
  [deleted]
- inopinatus 5y ago
  There are two bonus capabilities from using the form:valid hack: 1. The input element(s) can now be anywhere on the page. You can, for example, use adjacency to style a control button, without torturing your HTML to squeeze the button into being a sibling of whatever it's activating. 2. You can use form:valid as a parent selector i.e. as a wrapper element. You couldn't use an input:checked as a parent selector because the <input> element's content model is "nothing" i.e. there are no child elements under an <input>, but you sure can with a <form>. The result is less brittle to code-rot. This is extremely freeing and allows you to use, for example, a :checked adjacency for styling an activation button and a wrapper element (a form:valid) for the large complex component (modal? drop-down? slideover? video content?) that it activates. Heck, it can even be an iframe. Here's the bones of an example: https://codepen.io/inopinatus/pen/vYxrOeR?editors=1100 https://codepen.io/inopinatus/pen/vYxrOeR?editors=1100 There are two downsides: 1. Behaviour of some elements is different inside a <form>. Most obviously, don't nest a <form> inside with the same scope. 2. Your HTML maybe become a mess of scattered <form>, <input>, and <label> elements that many other developers will look at and say "WTF was this person thinking" and "what does this button do?"
- eyelidlessness 5y ago
  I would use it where I don’t have full control over the document structure (for example where my checkbox can’t sibling select because something third party wraps it in a div).