CSS select elements with partial id

I have some elements generated with PHP and I would like to know if it is possible to select an element with an incomplete id, example:

<div class="1" id="as_1"> ... </div>
<div class="2" id="bs_1"> ... </div>

<div class="1" id="as_2"> ... </div>
<div class="2" id="bs_2"> ... </div>

The class is being used to things they have in common, but now I need to select them individually but I don't know the entire id name.

Can I use something like:

#as_{ ... }
#bs_{ ... }

Not with ID selectors since they require complete ID names, but with substring attribute selectors:

div[id^="as_"]
div[id^="bs_"]

But since your elements have a class attribute anyway, why not add a common class to each group of elements and select by that class to make things simpler? You should be able to determine the grouping class using PHP as you do to generate the IDs.

Not sure if an exact a match to this question but we're using CodeceptJs and for that we have these two equivalent pieces:

myLocator: {

// xpath: "//*[contains(@data-testid, 'drawer')]",
css: '[data-testid*="drawer"]',
},

So using data-testid*= for css instead of contains for xpath so as to match against an element which has its data-testid named something like drawer-{something_dynamic_appended}.