# CSS on element level

**URL:** <https://community.glideapps.com/t/css-on-element-level/72527>\
**Category:** Feature Requests\
**Created:** [April 12, 2024, 4:52pm UTC](https://community.glideapps.com/t/css-on-element-level/72527 "2024-04-12T16:52:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Connor\_Finlayson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/connor_finlayson/32/79079_2.png) [@Connor\_Finlayson](https://community.glideapps.com/u/Connor_Finlayson)\
**Post date:** [April 12, 2024, 4:52pm UTC](https://community.glideapps.com/t/css-on-element-level/72527/1 "2024-04-12T16:52:30Z")

</div>

Hi,

I am loving customizing my apps using custom css but would love to have a bit more flexibility when it comes to applying css classes to elements within an element.

Example:

If I add 2 buttons to a section, the css class can only be applied to both buttons not an individual button unless you dive into the code and search for the default class name.

I think being able to customize individual elements within a component would be awesome!

---

<div class="post-metadata">

**Author:** ![abdo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abdo/32/36540_2.png) [@abdo](https://community.glideapps.com/u/abdo)\
**Post date:** [April 12, 2024, 7:47pm UTC](https://community.glideapps.com/t/css-on-element-level/72527/2 "2024-04-12T19:47:16Z")

</div>

You can style each button differently depending on its index or its text

---

<div class="post-metadata">

**Author:** ![Connor\_Finlayson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/connor_finlayson/32/79079_2.png) [@Connor\_Finlayson](https://community.glideapps.com/u/Connor_Finlayson)\
**Post date:** [April 12, 2024, 9:32pm UTC](https://community.glideapps.com/t/css-on-element-level/72527/3 "2024-04-12T21:32:48Z")

</div>

But you have to write custom css for each instance instead just applying a class name to element.

Ideally I want to apply a class to a button or image regardless of screen and text

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [April 12, 2024, 10:07pm UTC](https://community.glideapps.com/t/css-on-element-level/72527/4 "2024-04-12T22:07:57Z")

</div>

I would love to see better CSS application, but Glide has never really prioritized CSS and has always been pretty hacky.

---

<div class="post-metadata">

**Author:** ![tuzin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tuzin/32/86077_2.png) [@tuzin](https://community.glideapps.com/u/tuzin)\
**Post date:** [April 13, 2024, 6:31am UTC](https://community.glideapps.com/t/css-on-element-level/72527/5 "2024-04-13T06:31:42Z")

</div>

This requires a bit of trickery and understanding of the page structure. Since nowadays there’s a ton of CSS selectors and pseudo-classes, there are so many options to achieve the desired styling that I won’t even try to put them all into words here. However, I can throw in some ideas from pesronal experience on how to make this more reliable and manageable for you.

Good apps are consistent. Assuming you’re aiming to build a consistent UI&UX, the components are likely to be used the same way in different places of the app. For instance, you tend to have a component with 2 buttons for Editing and Deleting and you want to color the Delete button red. You can then assign a classname (e.g. `.delbtn`) for each component that has a delete button you want to style and then make sure there’s a distinction between the Delete button and another button, so you can style it independently. To make that distinction, you can make the Edit button accented while the Delete button is not, so Glide gives them different classnames (`.filled` and `.bordered` respectively). Then you can use the following CSS to style the Delete button:

```auto
.delbtn button.bordered {
background-color: #ffc2c2;
border-width: 1px;
border-color: red;
}

```

In the natural language that would sound like

> In each component that has a `.delbtn` class, look for `button` elements that have a `.bordered` class and make their border 1px wide and red, and change background color to `#ffc2c2` (different red)

The result is the following:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/2/a29194eae3c35bf4cb6da2e053e3ec42d30dbaf7.png)

You see how custom CSS is often about balancing between what’s already coded in Glide and what you can add to this. My example is far from perfect because if I would wanna use the same class for a button block with more than 1 outlined button, they will all become red and I would have to update the styles to only target one button. It’s crucial to really understand what you target and try to be as specific as possible so your styles aren’t applied elsewhere unexpectedly. When you inspect the page, you can see lots of selectors that can be helpful and harmful depending on the context. Auto-generated attribures, such as classnames and IDs are subjects to change, so try using the most comprehensive and explicit ones. Not only they seem less prone to change, but even if at some point your styles break due to Glide design updates, it’s easier to fix it when you see something like `.delbtn button.bordered` instead of `.sc-kOHTFB wire-button ___StyledWireButtonStyle-sc-1tlscdy-0.ivaBOY.ZOSJl.wire-hero-lib___ StyledWireButton2-sc-77hcmj-27.md.bordered.has-icon-left` (these 2 snippets target the same button!)

I hope that helps and feel free to reach out if you need help with a specific use case. The community is full of Glide ↔ CSS sorcerers, so we’ll figure the best CSS together 😀