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;
}
Related
Quick question which is mostly explained by the code.
Is this possible in CSS or do I have to just implement all the classes in the html?
.class1{
color:red;
}
.class2{
text-decoration:underline;
}
.class3{
class1;
class2;
border:1px solid green;
}
You can use a CSS pre-processor like LESS or SASS for CSS "class inheritance".
Otherwise, your code sample is not possible with pure CSS. You can, however, use a comma to add similar styles to multiple elements:
.class1, .class2 {
/* your styles */
}
It is not possible to do it as such. If an element needs to have multiple classes, just specify it in the HTML :
<span class="class1 class2">Test</span>
Note that it is possible to define a selector for elements having multiple classes. .class1.class2 selector would target the element in the example here above, while not targetting elements that don't have both classes specified in HTML. This is usefull for example if you wish to override one of the properties of 1 of the classes only when they're used in combination.
One approach you can use is to implement it through JS itself.
I would recommend using something like JSX it will simplify the process.
You can set a variable somewhere within scope and list your classes
const buttonStyle = "class-1 class-2 class-3"
Applying the style using JSX (Provided you use it)
<button id="my-button" class={ buttonStyle } />
Applying the style using JQuery (Provided you use it)
$("#my-button").addClass(buttonStyle)
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.
If I have a style class defined as such:
.myclass{
//bunch of other stuff
float:left;
}
and I define another class like this:
.myclass-right{
float:right;
}
and I define a div this way:
<div class="myclass myclass-right"></div>
Will that div inherit everything from myclass, but override the float property to float:right? That's what I'd expect to happen. Also kind of want to know if that has any cross-browser implications (good browsers vs. IE 7 or greater, f*** IE6).
As long as the selectors have the same specificity (in this case they do) and .myclass-right style block is defined after .myclass, yes.
Edit to expand: the order the classes appear in the html element has no effect, the only thing that matters is the specificity of the selector and the order in which the selectors appear in the style sheet.
Using !important is one way to do it.
.myclass-right{
float:right !important;
}
In addition if you are more specific with your selector it should override as well
div.myclass-right{
float:right;
}
Just wanted to throw out another option in addition to !important as well as style definition order: you can chain the two together as well:
.myclass.myclass-right{float:right;}
.myclass{float:left;}
As long as myclass-right is declared after your other class in your css file, it will work.
In case of a conflict, the css tag that comes after has a priority.
In other words - if you want some class to ever override others - just put it on end of your css file.
P.S. But don't forget that more specific rules has more priority, like .a.b {} is more powerful than just .a{}
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.
Say I have a div that uses two css classes that both use text-align, but one is centered and the other is right aligned.
Is it possible to specify something that will give one class priority over the other?
specify a more specific selector, eg prefix an ID before it or prefix the nodename before the class
assign it after the other class
if two classes are in separate files, import the priority file second
!important
!important is the lazy way, but you really should go for #1 to avoid important-ception. Once you've added one !important you can't use it to make some other rule even more important.
If you want to be explicit about it, you can specify how the combination of those two classes work together, by supplying a rule for elements that contain both classes. For instance, you can explicitly give something with both classes foo and bar the same styling as just bar as follows. This works because .foo.bar is more specific than just .foo for elements which have both classes, and thus this rule will take precedence over the .foo rule.
.foo { text-align: center }
.bar, .foo.bar { text-align: right }
If you don't want to be this explicit, you could just place the rule for bar after the rule for foo, as given selectors of the same specificity, later rules take precedence over earlier ones:
.foo { text-align: center }
.bar { text-align: right }
You can learn more about how precedence between rules is determined in the CSS specification chapter about the cascade; that's the "C" of CSS, and is important to understand well in order to take full advantage of CSS.
You should use CSS specificity to override previous declarations
http://htmldog.com/guides/cssadvanced/specificity/
p = 1 point
.column = 10 points
#wrap = 100 points
So:
p.column { text-align: right; }
can be overwritten by:
body p.column { text-align: left; }
as “meder omuraliev” has answered, you may use a more specified selector. and I would like to provider a general way that how to sepcific a higher priority for any type of selector, that is use the attr presdeo.
for example:
html body .foo { font-family: Arial !important;}
html body .bar[attr]{ font-family: Arial !important;}
to override this you may use like this:
html body .foo:not([NONE_EXISTS_ATTR]){ font-family: Consolas !important;}
html body .bar[attr]:not([NONE_EXISTS_ATTR]){ font-family: Consolas !important;}
To add to the other answers, you don't need to add selectors not related to what you originally wanted to increase specificity, the same can be achieved by repeating the same selector multiple times:
.foo.foo takes precedence over .foo, and .foo.foo.foo takes precedence over the previous ones.
This is better than adding non-related selectors, because you only select what you really want to select. Otherwise you might get unexpected behaviour when unrelated stuff you added changes.
.bar { text-align: right !important;}
use !important
Example :
p {
background-color: red !important;
}