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?

1

7 Answers

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

3

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> </ul> /* assuming parent is ul */

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> </li>

And do remove whenever you don't need for other <li>

Just add

.flex-control-thumbs li {
width: auto;
}

Yes, you can indeed. There are three ways of achieving this that I can think of.

1. Add inline styles to the elements.
2. create and append a new <style> element, and add the text to override this style to it.
3. Modify the css rule itself.

Notes:

1. is somewhat messy and adds to the parsing the browser needs to do to render.
2. perhaps my favourite method
3. Not cross-browser, some browsers like it done one way, others a different way, while the remainder just baulk at the idea.

Increase your CSS Specificity

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></div>
</div>
<div> <div></div>
</div>

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>

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy