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 to 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;
}
!important isn't recommended; it's part of the spec and is fine to use. The important thing is to use it sparingly, only when needed. It's the sledgehammer of CSS.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 */
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;
}<div>
<div class="sample-class"></div>
</div>
<div class="inner-page">
<div class="sample-class"></div>
</div>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>
Just add
.flex-control-thumbs li {
width: auto;
}
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>
Yes, you can indeed. There are three ways of achieving this that I can think of.
Notes:
