Can these verbose CSS selectors be improved with SASS?

Question

Using Gravity Forms in WordPress you don't have much control over the field names it generates. So if you want to target fields 131, 132 and 133 in forms 11 and 15 here's what the CSS looks like (this is for some CSS to do something with the last li element in a list):

ul#input_11_131 li:last-child input,
ul#input_11_132 li:last-child input,
ul#input_15_131 li:last-child input,
ul#input_15_132 li:last-child input {
    //do something;
}

ul#input_11_133 li:last-child label,
ul#input_15_133 li:last-child label {
    //do a different thing;
}

This is a somewhat simplified version, we've actually dozens more lines like this.

Currently we're only using SASS for some simple things like nesting and variables.

But I'm wondering if SASS can help with this. Ideally, at the very least, we'd define the form numbers 11 and 15 at the start and maybe even the fields and loop through them.

Answer 1

You can also apply css using HTML Attributes .

LIKE

ul[id^='input_11_'] li:last-child input{    
  // Code common properties Here which is common in all input_11_* with li:last-child input
}

For Details check the w3school reference CSS SELECTORS