copper bridge
Astro generate style selectors with :where() like
.card:where(.astro-v5tidmuc) {
flex-direction: column;
}
I can customize it
.card:where(.astro-v5tidmuc) {
flex-direction: row;
}
But when I upgrade Starlight selector part v5tidmuc becomes different string. I dont have acces to .astro file with template linking styles. How do I solve this better than manually replacing v5tidmuc in every version of Starlight?
winter ibexBOT
Hi @copper bridge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Astro uses the :where() pseudo-class for scoped styles, which means the styles are encapsulated within the component they are defined in. The string you see, such as v5tidmuc, is a unique identifier generated by Astro for each component to ensure the styles are scoped correctly. This identifier changes every time the component is compiled, so it's not recommended to use it directly for customization.
Instead, you should define your own classes or IDs within the Astro component and use those for customization. For example:
<div class="card">...</div>
<style>
.card { flex-direction: column; }
</style>
Then, in your custom styles, you can target the .card class:
.card { flex-direction: row; }
This way, your custom styles will not be affected by the changing identifiers in Astro's scoped styles.
If you don't have access to the Astro file to add your own classes or IDs, you might need to ask the maintainer of the Starlight component to add them for you.