How to add specific Class in CSS - css

Question

if I add a css class to my div, it will be overwritten with v-slot-tradeMatrixLayout. How can I specify this class specifically in my CSS file so that only this is called. The tradeMatrixLayout is given to a VerticalLayout.
This will be examined in chrome
<div class="v-slot v-slot-tradeMatrixLayout">
And this is my CSS file
.tradeMatrixLayout{
margin-left: 15px !important;
}
How can the div call my specifically written class?

Answer 1

The class attribute can receive multiple CSS classes by using their name and separated by a space, as seen here. For your case you can add it like:
<div class="v-slot tradeMatrixLayout">
In this example, you are adding 2 classes: v-slot and tradeMatrixLayout.
if v-slot is overwritting whatever you are trying to set with tradeMatrixLayout, then it means that you have to play with Specificity. In summary, some rules have more importance than others, even if you use !important (imagine you have 3 classes that use !important, which one should be used?). The higher the specificity, the more important is the rule.
The following list of selector types increases by specificity:
Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
Class selectors (e.g., .example), attributes selectors (e.g.,
[type="radio"]) and pseudo-classes (e.g., :hover).
ID selectors (e.g., > #example).
if you want it to have more specificity, either change your CSS to:
div.tradeMatrixLayout{
margin-left: 15px;
}
of add it using an id:
<div id="myDiv" class="v-slot tradeMatrixLayout">
div#myDiv.tradeMatrixLayout{
margin-left: 15px;
}

Answer 2

You can also use javascript to add the class by manipulating the DOM.
function myFunction() {
var el = document.getElementsByClassName("v-slot");
el.classList.add("tradeMatrixLayout");
}

Answer 3

it should be end with your class
[class$='tradeMatrixLayout']{
color: red;
margin-left: 15px !important;
}
Just try above code it will work for you

Answer 4

The .class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of the class.
You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.) character, followed by the name of the class
I don't fully understand what you clearly want though? What you have seems okay?
v-slot v-slot-gewerkeMatrixLayout
This is referencing to these 2 classes, It cannot use the same elements from both as it will be overwritten. But if you have 2 different instructions it should work

Answer 5

You could just specify the class your in your CSS like this
.v-slot-tradeMatrixLayout {
margin-left: 15px !important;
}

Answer 6

Just add another CSS with that CSS class (v-slot)
Like:
.v-slot{
margin-right:5px;
}
.v-slot.tradeMatrixLayout{
margin-left:50px
}
And your html will look like
<div class="v-slot"></div>
<div class="v-slot tradeMatrixLayout"></div>
.v-slot{
border: 3px solid blue;
height: 50px;
width: 50px;
margin-left: 5px;
}
.v-slot.tradeMatrixLayout{
margin-left:50px
}
<div class="v-slot"></div>
<div class="v-slot tradeMatrixLayout"></div>