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.
Related
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;}
If I define a css class, is there anyway to set that class as a default class for an html element? To clarify, I was hoping to factor out the definition of the class so it could be used by one or more css selectors or applied discreetly in the html.
For example:
.myclass {float:right}
h1 {class: myclass}
The above does not work of course, but hopefully you know what I am asking as I have not been able to find how to do this.
Not with standard CSS, but why not just do:
h1 {
float: right;
}
If I define a css class, is there anyway to set that class as a default class for an html element?
No. You can, however, select all elements and apply a rule to them:
* {
foo: bar;
}
You can do that if you are using a CSS processor like LESS (http://lesscss.org/#-mixins) or SASS (http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins).
From your repeated comment “I was hoping to factor out the definition of the class so it could be used by one or more elements or applied discreetly”, it seems that what you are really up to is how to define a set of CSS declarations so that they apply to elements in a given class and and some elements independently of class. The way to do this is to use a list of selectors, e.g.
.myclass, h1 { float:right; /* and other declarations as needed */ }
This is the kind of “factoring out” that you can achieve in CSS. There is no way to “factor out” “CSS classes”, because there are no CSS classes. There are classes in HTML, and you can specify rules that apply to such classes.
Just write the following HTML
<h1 class="mylass"> .... </h1>
and write VALID CSS
i.e.
.myclass {float: right}
I'm not sure what you want to achieve, but maybe you ask this because you want to have multiple html elements use the same "class"?
If that's the case you can write it like this:
h1, h2, span{
background: red;
}
in my html I have
<div id="mainNewsBody" class="news">
<a class="readMore" href="/News/Details/1">read more ...</a>
</div>
I tried to style read more ... snipper with this css
#mainNewsBody .news .readMore a{
color: #7F0609;
}
to actually apply this style I have to use !important keyword in color property.
I know that this !important keyword force to use that property but I do not understand why that is the case here, because I explicitly told to match on particular id with particular class element and inside that element to mach link.
Can someone englight me.
Thanks
Try this one:
.news .readMore {
color: #7F0609;
}
There's no need to call for id and class name for the same element.
It's a.readMore instead of .readMore a (the first case would search for an element with class .readMore and append the CSS to any children a-elements)
and #mainNewsBody .news should be #mainNewsBody.news (you should 'concatenate' the id and class since they refer to the same element)
making a total of #mainNewsBody.news a.readMore
Fiddle
EDIT
I see many notes on simplifying your css to just classes. This really depends on what you're trying to accomplish. If you're working with a huge CSS file, I'd recommend specifying as strict as possible. This to prevent any CSS being applied on places where you don't want it to.
a { } for example will mess with all your links, a.news { } will only mess with a class='news'
It'd the specificity which is troubling you, the more elements class id you have in your selector, more specific your selector is.
So for example
.class a {
}
is more specific than just
a {
}
Just see to it that you do not have a more specific selector, if you've than you need to make the current one more specific or use !important declaration as you stated.
In the above snippet this is incorrect
#mainNewsBody .news .readMore a
It will search for an element having class news inside an element having an id mainNewsBody which is not true in your case so either use this
#mainNewsBody a.readMore {
/* This will be more specific than the below one
as you are using id here and not class */
color: #7F0609;
}
Or use
.news a.readMore {
color: #7F0609;
}
Ozan is right, remove the "mainNewsBody" ID from the CSS if it's not absolutely necessary.
.news .readMore a{
color: #7F0609;}
If you want to be really specific and need to include the ID in the CSS selector remove the space from in-front of ".news"
#mainNewsBody.news .readMore a{
color: #7F0609;}
CSS Tricks - Multiple Class ID Selectors
CSS rules marked !important take precedence over later rules. !important ensures that this rule has precedence.
Probably your code is generating inline css for the a element, or you have another less specific definition for a element with !important keyword somewhere else.
Inline styles have priority higher than styles defined outside the element. To overcome the inline style or a style with !important keyword by a less specific definition, you need to define it by the keyword !important and a more specific definition.
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;
...
}
We're using a template for joomla where creators defined the rule in constant.css
table
{
border-collapse:collapse;
border:0px;
width:100%;
}
When I need my own table with a custom params (width, border and so on), a nightmare begins. If I use general html params, they don't work since css rules are more important (CMIIW). If I use style= param, I suppose I can't control how the table looks for IE up to 7 inclusive.
So is there a general approach to work around this or I just need to comment the rule (as I already did).
And also, am I right if I say that creators of joomla templates should not define such general rules as width:100% by default? I mean if they don't want users of their template to complain.
Method 1
Put a class on all tables that you create, and create a selector like table.classname that overrides the properties. Since you should only use tables for tabular data, adding a class name makes sense because it's easier to apply additional styles (colours, borders) to all your tables.
To override border-collapse: collapse, use border-collapse: separate along with border-spacing: 4px (or whatever value). This doesn't work in IE6 and may not work in IE7 either.
For a border round the table just add a border rule. If you want borders on individual cells, target table.classname td and put the border rule there.
To reset the width, use width: auto or put an explicit width.
Method 2
An alternate method would be to find all the tables used in the template, add a class to them instead, and change the original rule to use that class. Then, any tables without that class will use the default table properties.
This is probably going to be quite difficult to implement because Joomla templates often have module and component overrides, meaning there will be many tables in many places. Good luck! :p
You're correct, setting those styles (well, width at least) on a generic table element is a bad idea for a template. Although the fact they're probably using tables for layout isn't a good sign anyway.
table{
border-collapse:collapse;
border:0px;
width:100%;
}
The following should override the above css rule:
.classofyourtable
{
width:50%;
}
#idofyourtable
{
border:1px;
width:20px;
}
Please note also of the following CSS cascading precedence(1 being the highest):
inline
ids
class
tagname
Rules with less precedence will be overriden by the higher ones.
Applying the style to a class or id both override the style in the general tag style.
There's a number of ways to do it. As Marius says, a class or ID will help.
Lets say you put an id on the body element (<body id="foo">), then you could override the built-in table style using
#foo table {
width: auto;
}
Or if you only want to restyle certain tables, try using a class (<table class="foo">):
table.foo {
width: 25em;
}
But yeah, why not just edit the template's CSS to do what you want?
Apply another rule below the existing one:
table
{
background-color: Navy;
width: 100%;
}
/* override existing rule: */
table
{
width: 960px;
}
When a CSS rule is specified twice, the browser will use the last one.
And yes, you are correct--The proper way for Joomla go about this is to implement namespacing using classes. Overriding default CSS rules is bad practice.