I want to change the padding of 2/6 pages in my website, but the content divs of the website are using the same CSS, the only solution I can think of is changing the id's of all the content divs and make separate CSS for all of them. Is there an easier way to do this?
Asked
Active
Viewed 528 times
0
-
Use javascript. – EgMusic Oct 12 '17 at 17:41
-
No, don't use javascript. Just add another class to your elements. Also for the future: https://smacss.com/ – lumio Oct 12 '17 at 17:43
-
Give html/body/any other common ancestor element an id or class, and use that to format their descendants differently ... – CBroe Oct 12 '17 at 17:43
3 Answers
0
You could create a new class and apply it to only the places you want changed.
.pad-class{
padding:5px;
}
<div class="other-class pad-class"></div>
Placing the class last will allow for your new class to overwrite the first one.
Niles Tanner
- 3,911
- 2
- 17
- 29
0
You should just apply a specific class to the <body> tag of the pages you want to modify. Then you can write a CSS rule for that class.
HTML (normal page)
<body>
...
</body>
HTML (different padding page)
<body class="different-padding">
...
</body>
CSS
<style>
body { padding: 10px; }
body.different-padding { padding: 20px; }
</style>
Davide Giorgetta
- 65
- 2
- 12
0
<div class="first second"></div>
Insert second where you want to change padding else keep only single class further reference: Using two CSS classes on one element
you can also use inline styling if no. of divs are less
abhishekrn
- 79
- 8