CODEWITHSUNDEEP
cssfile
sulox32
sulox32

Reputation: 428

How to add specific Class in CSS

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?

Upvotes: 1

Views: 1782

Answers (6)

Billy
Billy

Reputation: 45

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>

Upvotes: 0

c-chavez
c-chavez

Reputation: 7496

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;
}

Upvotes: 1

Peter
Peter

Reputation: 153

You could just specify the class your in your CSS like this

.v-slot-tradeMatrixLayout {
    margin-left: 15px !important;
}

Upvotes: 0

K.Madden
K.Madden

Reputation: 210

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

Upvotes: 0

Rahul
Rahul

Reputation: 4364

it should be end with your class

[class$='tradeMatrixLayout']{
  color: red;
  margin-left: 15px !important;
}

Just try above code it will work for you

Upvotes: 1

Brix Angeles
Brix Angeles

Reputation: 61

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");
}

Upvotes: 1

Related Questions