I’m adding some styles to some legacy code that dynamically adds a step counter per wizard step of this web app. For instance if the first page of the web wizard is completed the id attribute in the html would equal id="my-wizard-page-name.step1".
An example of what the html may look like in the inspector is below:
<div id="my-wizard-page.step1">
<span>This is step 1</span>
</div>
After completing step 1 it would then reload and the div would be replaced with:
<div id="my-wizard-page.step2">
<span>This is step 2</span>
</div>
I am trying to add styles specific to the wizard page without updating the template class or id. Is it possible to parse the id in my css or less files. Im thinking something that would be similar to #my-wizard-page-name\.step* or #my-wizard-page-name* that would target every step within the page name.
(FYI: the backslah in the id is so I can use the . without the css assuming its a class on the id)
>Solution :
You can use attribute selectors
For your case, the starts with operator would be best: [id^=my-wizard-page]
Though, it’s probably better to just add a class like my-wizard-page-step to each item and use that to select them.