I've to remove the inline style of of the div element, can anybody tell me how to select that particular div, I've tried selecting class but inline style has more priority than class selector. Please tell me how to remove the inline style from it, I'm using WordPress and it is theme generated css.
This is one of those just because you can doesn't mean you should moments. Ideally, you should make a child theme and make your updates there. You can find plenty of help on how to make child themes in the WordPress docs.
That said, it is possible, but it's not best practice. This code will override what is in your current inline style.
/* this select a div with the class img-inner with the style attribute */
div.img-inner[style] {
margin: 2rem !important; /* anything you need to override needs an !important */
padding: 0 !important;
}
Once you have the div selected, you can pretty much do what you need. I just put in some declarations as an example. You can add more declarations or override/unset others.
If you need, you can use a more complex attribute selector to see if the style contains something specific.
Please try this -
.col-inner .img a.image-lightbox .img-inner.img-cover{padding: top: 77% !important;margin: 0 !important;}
Related
What I want to achieve is to disable the Twitter Bootstrap class for my own input element with class named login_button. By default the bootstrap.min.css class is adding unnecessary properties like box-shadow etc. to my input.login_button element.
I know I can define box-shadow: none; but I wonder if there are other possibilities to achieve that?
Just override the Bootstrap style. As long as Bootstrap is included on your page before your custom CSS then your CSS should override Bootstrap as the specificity of the selector would be the same. Add this to your custom CSS and override the styles accordingly:
input.login_button {
box-shadow: none;
border: none;
line-height: initial;
/* Etc. */
}
Here input.login_button has a specificity score of 011 whereas Bootstrap's input[type="text"] only has a specificity score of 010, meaning your custom style will be strong enough to override Bootstrap's regardless of the order of your CSS.
You can't, except by modifying bootstrap.min.css. All you can do is overwrite the styles with more specific selectors.
Solution
The Easiest Solution in this case is that you can write !important with you own custom CSS lines and that will prevent bootstrap from adding any unintended styles.
how can I force an image to be aligned hard to the left, regardless of what css applies to the container it is placed in?
You could use !important on the style to increase it's precedence over other styles.
style="text-align: left !important;"
Or
#foo { text-align: left !important; }
However, this is considered bad practice. Ideally you should give your selectors the level of specificity required. Could you post up your CSS.
You need to apply a more specific CSS rule to that particular image, e.g. one that references the image by Id or use !important.
#idOfMyImage { /* Desired CSS here */ }
Here's a good (and humorous) overview of specificity in CSS
http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg
I have a few stylesheets that beautifully style all my elements within the tag.
I do have one specific that I need to populate with some custom html (from the database).
Is there a way to ignore all styles only within my element? or am I out of luck here.
You can't clear styles, I am taking a shot in the dark here on your question.
But you will have to RESET your styles for a particualar element:
div.reset{
margin: 0;
padding: 0;
etc;
}
for something like:
<div class="reset">something</div>
that way you will reset your styling of that particular element.
I have a css class pause. This is applied in various pages. Only one section of
markup doesn't margin-left:42px;, so I want to make it 0px. I don't want to
use a new class because I am applying this class dynamically using jQuery for
certain conditions.
So, I need to overwrite the class to make margin-left:0px; from markup.
css
.pause a{
background-image:url(../img/pink_pause.png);float:left;
height:26px;width:96px; margin-left:42px; margin-top:6px;
}
markup
<td class="pause bid_button_logout bidder_name">
</td>
How can I neutralize margin-left by any other class or any other way?
If you can't define another style, use an inline style on the element that you don't want margin-left applied to. Inline styles are more specific than those defined elsewhere, so it should take precedence:
<a href="login" style="margin-left:0">
You could split the .pause into two css classes where one of them only defines the extra margin, and simply not apply that class to the ones that don't need margin.
Or set the style attribute on the element like this: style="margin-left: 0;", this will override the css value.
Or you could create anoter class called say ".noMargin" like this:
.noMargin{ margin-left: 0 !important; }
/* important overrides other class values
even if the cascading would not */
and apply that class to the ones you dont want to have the extra margin.
If you want to use inline style:
Or creating a new declaration:
.bid_button_logout a{
margin-left: 0px;
}
but this has to come after .pause a.
Or, if you really need to switch classes see toggleClass
Try the important hack:
margin-left: 0px !important;
If bid_button_logout or bidder_name are unique to the situation where you want no margin, add margin-left:0px; to either of those classes (but make sure they are after .pause a in your css file. If not, use your conditional jQuery to add an inline style, which will bypass the original left margin style.
Is there any way to apply a style that will effectively block the
application of any applied or inherited styles for that object and any
contained objects?
No. You'll have to override all other properties being set on it.
Write a style class i.e clearall override all the attributes that you need to what you want as the default vaules. i.e
.clearall {
display: block;
clear: both;
height: 1px;
margin: 0 0 0 0; ... }
Now, you can use that class to
<div class"clear">
<div class="awesome"> ..
</div>
</div>
<div class"clear">
<div class="woooow"> ..
</div>
</div>`
So now everytime that you need to reset the style, you can use that class
I would suggest to add at the end of your CSS code a complete reset code such as the one from Eric Meyer.
It should take care of erase most everything and and you can put your own code after that.
You can always can call !important on an element to override specificity inherits.
.wrapper p{color:red; background:blue;}
.wrapper div p{color:blue !important; background:none !important;}
Actually - no... But you can try to use jQuery for this purposes.
$('.class').removeClass().removeAttr('style');
It should remove all classes from matching elements and clear style attribute. Though, it's untested +)
If you want to do this for testing/debugging purposes, have a look at the Firefox Web Developer add-on. It has functions for removing CSS for whole pages or individual elements and their contained elements, or for altering CSS on the fly whilst viewing the page.
If you are looking for a good CSS reset for production use, have a look at Tripoli. This is a set of CSS styles that will reset the default rendering in each browser to the same common base, to use as a starting point for applying your own styles. There are many other CSS resets around but Tripoli is my personal favourite.
There‘s no one CSS property that turns off all other CSS properties. You’ll have to set each property to whatever value you want (for some CSS properties, e.g. font-family, there’s no “off” value — text has to be rendered in some font).
As for “that object and any contained objects” (emphasis mine), the * selector selects all elements. So, your CSS rule could look like this:
.turn-off-all-styles,
.turn-off-all-styles * {
/* Disable every CSS property here */
}
As others have mentioned, check out Eric Meyer’s CSS reset for a good example of setting all CSS properties to defaults. If you add !important after each value, that should stop other CSS rules from interfering with this style, e.g.
.turn-off-all-styles,
.turn-off-all-styles * {
margin: 0 !important;
...
}