How do use ID and class together

I Need Help
1

Can I do this in blocsapp?

#heading .red

The class manager does not do ID

2

@Zixuan, If you’ve given a component (bloc, bric, row, etc) an id and a class name, you can Target that element to style it with either. So just use the class name.(because it’s easier) If however, for some reason you want to target an element for styling by the id, you have three options.

  1. Apply CSS styling after export in the styles.css stylesheet.
  2. Apply CSS styling inside of Blocs by adding CSS rules within a style tag on the page settings area.
  3. Create a CSS file (ie: my-extra-styles.css), apply some CSS style rules, and attach that stylesheet to the project via the page settings dialog.

I always try and use classes first, and only use CSS if I can’t accomplish it with a class. A couple examples of that would be using the z-index attribute or position attribute, (ie: position:fixed; position:absolute; etc) neither of which is accessible within the custom class dialog.

1 Like
3

@Creative, thank you for the solutions. I got that but I am looking for a native feature in Blocs where I can do it easier without doing after export the file.

Another part, I want to bring up is whether in future Blocs can introduce compound styles. Compound styles are created by combining ID, class, or tag styles. For instance you select any element on the canvas, it can target the compound CSS automatically without manual key into the class field.

e.g. if i select a button in a column with ID hero, it will create a css rule such as #hero .button…

@Norm, is this one area you are looking into at?