CODEWITHSUNDEEP
htmlcss
Shinomoto Asakura
Shinomoto Asakura

Reputation: 1542

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

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>

Upvotes: 0

Views: 378

Answers (2)

SMAKSS
SMAKSS

Reputation: 10520

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>

Upvotes: 3

Thomas Timmermans
Thomas Timmermans

Reputation: 402

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.

Upvotes: 1

Related Questions