CODEWITHSUNDEEP
javascripthtmlcss
Sharad Soni
Sharad Soni

Reputation: 378

Add more elements in CSS style

I am trying to develop something where I need this requirement, I tried a couple of things, but not able to do it.

There is one style - A:

.someClass {
    padding-right:10px;
}

now I want to add margin also in same class like - B:

.someClass {
    margin-left:10px;
}

Now I need both, padding and margin. The thing is I can't modify A as it set by some third party JS, which doesn't reside locally.

So, is there any way I can achieve this by Pure CSS or JS (NO Jquery)

Upvotes: 0

Views: 46

Answers (2)

user663031
user663031

Reputation:

There is one style - A:

.someClass {
  padding-right: 10px;
}

No, that is not a "style". That is a "rule". It says to apply padding-right to elements with the someClass class.

Now you add another rule:

.someClass {
  margin-left: 10px;
}

That says to apply margin-left to elements with the someClass class.

Together the two rules do exactly what you want. The key point is that CSS will apply all rules whose "selectors" (here, the .someClass part) match the element in question. If the two rules contain the same properties, then there are ways (involving concepts such as "precedence" and "specificity") in which CSS will choose which one to apply, but that is not the case here, so both padding-right and margin-left will be applied to elements with the someClass class.

Upvotes: 2

Tibix
Tibix

Reputation: 390

You can put both margin and padding into the element at once:

.someClass{
margin: 10px;
padding: 10px;
}

Also if the margin or anything else is set by like you said third party JS you can Override it in CSS by adding: !important so your code would look like this:

.someClass{
margin: 10px !important;
padding: 10px !important;
}

According to your question you need only padding to override. Hope i understood your Question and could help.

Upvotes: 1

Related Questions