How to create a Custom CSS Class to apply directly in HTML Tag?

Question

Is it possible create a custom class for example:

border {
  border:1px solid;
}

and apply directly in a tag, without need of class=""?

Example: <div class="row" border></div>

[This question](https://stackoverflow.com/questions/1735230/can-i-add-a-custom-attribute-to-an-html-tag) might give you a few ideas on how to do this. — Eddie Reeder, Oct 19 '20 at 17:15
`[border] { border:1px solid; }` but you should use a data-attribute *(data-border for instance)* see https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes and https://css-tricks.com/a-complete-guide-to-data-attributes/ — G-Cyrillus, Oct 19 '20 at 17:19
Maybe I expressed myself wrong, I didnt mean class, but a custom css style. — Shinomoto Asakura, Oct 19 '20 at 17:43

SMAKSS · Accepted Answer · 2020-10-19T17:40:58.227

3

Well, you can. But as @G-Cyrillus said in the comments to create a custom attribute in your HTML element it is better to use HTML data-attribute to stick with the HTML standards. Then you can style your element without adding a class attribute.

So if you don't want to add it as a data-attribute you can style it like this:

[border] {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

<div class="row" border></div>

And with the data-attribute (Which is the standard one) you can do the same:

div[data-border] {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

<div class="row" data-border></div>

edited Oct 19 '20 at 17:40

answered Oct 19 '20 at 17:19

SMAKSS

9,606
3
19
34

1

see my comment about the data-attribute made for this kind of use ;) to fullfill your answer. – G-Cyrillus Oct 19 '20 at 17:21
@G-Cyrillus That is exactly what I want to add. Thank you. I just searching for it. – SMAKSS Oct 19 '20 at 17:22
I agree with G-Cyrillus, you should probably use a data attribute, e.g.
. Then in css you would just have [data-border] { width: 100px; height: 100px; border: 1px solid }. See here for details: https://css-tricks.com/a-complete-guide-to-data-attributes/ – Michael Tucker Oct 19 '20 at 17:22

score 1 · Answer 2 · answered Oct 19 '20 at 17:26

1

What you want can be accomplished by using a javascript framework like VueJs or React. I know, in VueJs it's called a prop that you pass to a child element. Whether or not the prop (border in your case) is passed down, the styling is applied or not.

answered Oct 19 '20 at 17:26

Thomas Timmermans

342
3
21

1

Actually, i'm using VUE and Vuetify – Shinomoto Asakura Oct 19 '20 at 17:36

How to create a Custom CSS Class to apply directly in HTML Tag?

2 Answers2