div[data]

…

Let’s say I want to select all DIVs starting with those “data” attributes.
I started trying div[attr^=”data”] with no success of course.

Any help?

This would work

:root{
  --optional: hidden;
}

.optional{
  display: var(--optional);
}

select[value="other"] ~ .optional {
   --optional: block;
}

Input and Select

I handle this by having my startup JS give input and select elements having attribute data-value an “onchange” handler (or “change” event listener) that does this.dataset.value=this.value (remember to use .bind(elm) or a factory function). Although this solution is not pure CSS, it’s a mere whiff of boilerplate JS code to let CSS handle dependent display elements like magic in most any project (adapt to use your framework’s selector function and iterator):

$$('input[data-value], select[data-value]').forEach(elm => {
    elm.onchange=(function(){this.dataset.value=this.value}).bind(elm)
    elm.dataset.value=elm.value
})

Then the CSS for @Gumnos’ post would need only a minor change, to prefix “data-” in the attribute selector:

<style>
 .optional {
  display: hidden;
 }
 select[data-value="other"] ~ .optional {
  display: block;
 }
</style>

On a related topic…

For a checkbox (and radiobutton) solution, I set specific classes on the controlling and target elements, and craft CSS to handle an element hierarchy of both child and following-sibling. The CSS selectors for the controlling classes are combined with :checked or :not(:checked) as needed.

This solution is pure CSS, plus the relationship between elements is explicitly stated in the markup, so it’s easy for the designer to understand and manage.

Depending on your project you can limit yourself to a couple of simple selectors like .controlFollowing:checked and .targetFollowing (provided you put each set in a wrapper element), or you can have incredibly detailed multi-step control by using selectors such as .controlFollowing1:checked .targetFollowing1 and .controlFollowing1:not(:checked) .targetFollowing1 and extend the numbers as needed. I’ve built up a library file I link when I need this feature, but I caution you not to extend the idea more than a project warrants.

In live code, most of the time, a small simple style set suffices:

<style>
.controlFollowing ~ .targetFollowing
,.controlChild > .targetChild
{display: none; }
.controlFollowing:checked ~ .targetFollowing
, .controlChild:checked > .targetChild
{display: initial; }
</style>

     Toggle? 
         Yes, Virginia...
    


     Toggle, too? 
          Extend? 
            Far out! 
        
    

Sorry, “checked” may have been a poor choice of example since the :checked would suffice. A better example might be the .value of a select-list

<style>
 .optional {
  display: hidden;
 }
 select[value="other"] ~ .optional {
  display: block;
 }
</style>

<p>
Please let us know why you rated us "Excellent"
</p>
<select>
  <option value="service">Great service</option>
  <option value="price">Great price</option>
  <option value="adorable">Adorable puppies!</option>
  <option value="other">Other</option>
</select> 
<label class=optional>Please let us know what other reason
<input type="text">
</label>

AFAIK, there’s no way in pure CSS to change layout based on the value of a select drop-down or the text-value of an input box. So if I wanted to make my other text-input only show when “Other” is selected, it currently requires JS.

input:checked:after{}
you mean like this…

Thanks once again