I'm developing pages, now in my css style I have this line of code
.flex-control-thumbs li {
width: 25%;
float: left;
margin: 0;
}
for my pages. Now, some of my pages don't need this line
width: 25%;
float: left;
It is possible that I can overwrite it in internal css of the page, which will cause the original behaviour to be ignored?
Using !important
is not recommended but in this situation I think you should -
Write this in your internal CSS -
.flex-control-thumbs li {
width: auto !important;
float: none !important;
}
instead of overwriting, create it as different css and call it in your element as other css(multiple css).
Something like:
.flex-control-thumbs li
{ margin: 0; }
Internal CSS:
.additional li
{width: 25%; float: left;}
<ul class="flex-control-thumbs additional"> </ul> /* assuming parent is ul */
Just add
.flex-control-thumbs li {
width: auto;
}
Example:
.parent-class .flex-control-thumbs li {
width: auto;
float: none;
}
Demo:
.sample-class {
height: 50px;
width: 50px;
background: red;
}
.inner-page .sample-class {
background: green;
}
_x000D_
<div>
<div class="sample-class"></div>
</div>
<div class="inner-page">
<div class="sample-class"></div>
</div>
_x000D_
You can add your styles in the required page after the external style sheet so they'll cascade and overwrite the first set of rules.
<link rel="stylesheet" href="allpages.css">
<style>
.flex-control-thumbs li {
width: auto;
float: none;
}
</style>
You can create one more class naming
.flex-control-thumbs-without-width li {
width: auto;
float: initial; or none
}
Add this class whenever you need to override like below,
<li class="flex-control-thumbs flex-control-thumbs-without-width"> </li>
And do remove whenever you don't need for other <li>
Yes, you can indeed. There are three ways of achieving this that I can think of.
Notes:
Source: Stackoverflow.com