I have recently observed the following change more and more often, people write div.class or div#id instead of just .class or #id.
What is the best way to target your classes in CSS And why?
If I remember correctly, div.class has the same result as .class.?
div.class will affect only to div elements, and is more specific than just using .class. So, if you write both, div.class and just .class in a div, the first one will win in preference.
But I think that is more elegant don't using it, if you don't have a good reason for that (you may want to apply something just to div elements with this class and not to any other).
What the best way is depends on what you want to achieve. Do you want to make sure that a block style can't be accidentally applied to an inline element? Or do you have complex CSS and performance is becoming an issue?
If you use div.class, then the style will only be applied to div with that class. <span class="class"> won't be affected. That means you can also define span.class to do something special for span or you can move common styles to a generic .class definition.
If you care about performance, here are a couple of links for you:
http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS
http://csswizardry.com/2011/09/writing-efficient-css-selectors/
(google for css performance)
.class will effect all the element we gave class name as class. If you use div.class, then the style will only be applied to div with that class. Other elements won't be affected. following fiddle explains more.
http://jsfiddle.net/wtcyvju2/
.class can be used for both div class and span also & div.class can be used when tag has that specific class
Related
The title says most of it. Is there a CSS keyword which overrides !important at one higher level or is there some feature like this planned in any newer CSS spec?
Of course, I know that !important is a bit likely to be used by noobs and that in many cases it is not the best way to go as stylesheets may really suck if badly written. However, sometimes it's useful and even needed.
The strongest style in CSS I can think of is an inline style with !important like this:
<span id="bluebeaver" style="color: red !important;">I am a happy blue beaver</span>
Now let's assume that I cannot edit the HTML and must modify the style from an external stylesheet.
It would be really great to have something like:
#bluebeaver {
color: blue !important 2;
}
If they had levels for it like for instance with z-index.
Is there any solution to this or anything planned with newer CSS specifications?
So far I did not find anything.
Can you show a CSS solution to override an !important inline style or is there definitely no possibility?
Simply remove the style attribute from the element using JavaScript:
document.getElementById("bluebeaver").removeAttribute('style');
Then use your external stylesheet to apply whatever CSS you want.
Two reasons why creating higher levels of !important is not a good idea:
It sets a bad precedent.
Adding !important2 would be caving in to poor-coding habits on a global scale. It would be the W3C sending a signal that anything goes.
You've also opened the door to !important3, !important4, etc. Where does it end?
Lowering standards and expectations is not a good way for the industry to make progress.
It may not even solve your problem.
Consider this: The person who set that inline style to color: red !important, obviously wanted that rule to have the highest priority.
If your idea became real, and there were higher levels of !important, let's say going up to !important10, guess what that person would have used? And you'd still have the same problem, but you'd be here asking if there were any plans for !important11.
No, there is no keyword or other way to make a declaration more important than !important. There is no known activity to change this.
In general, it is possible to override a declaration that has !important by using a rule that also has it and that has higher specificity. However, a declaration in a style attribute has, by definition, higher specificity than any other author declaration. The only way to defeat it is in CSS is to use a user style sheet with !important.
There are non-CSS solutions, but they are rather obvious, such as using JavaScript to simply remove or modify the style attribute.
The highest order I know of is targeting elements that have inline styles applied. You can actually select the element's style data attribute in the CSS selector to override its style! Check this out:
.blue[style]{
color:blue !important;
}
<div class="blue" style="color:red;">SO VERY IMPORTANT</div>
Of course you can even get more specific by targeting the style specifically, such as .blue[style="color:red;"].
You can modify the colour of HTML element using javascript.
document.getElementById('bluebeaver').style.color=blue;
Demo : https://jsfiddle.net/041fhz07/
Try Specificity: If two selectors apply to the same element, the one with higher specificity wins.
Try to style your element the more specific you can. Maybe use:
#bluebeaver span {}
Take a look to this link: CSS Specificity: Things You Should Know
if you want to use CSS only you just declare the new style with !important, the last "important" wins. though I'd avoid using it in the first place unless completely necessary.
it should only be used for styles that are essential for your page/app to work, not things that are expected to change.
another solution is to use JS to remove and/or add classes/id to change the style of the element when you don't want to change the CSS itself.
div.prop1.imp1.imp2 {
background-color: red !important;
}
div.prop1 {
background-color: black;
}
div.prop1.imp1 {
background-color: white !important;
}
If you can't do this since not all elements have the .imp1 class on the list in JavaScript, and you are adding say a highlight on something with a button click (.imp2) . You can specify the 'more important' .imp2 class above the others with !important on it.
This makes the property with the additional imp2 class more important than the .prop1.imp1 style because it is loaded first in the css.
Here is a difficulty I am trying to solve. I am working inside a client's page to develop a scroller interface. Basically, I cannot change the doctype, the surrounding elements and the stylesheets or scripts that are already in the client's page and I have to make my little block of code "fit" inside this. This is common for web developers.
The tricky part now is that some img elements inside my block are actually being targeted by a CSS rule inside the inherited client's stylesheet (which, of course, I cannot remove or change). It would be too long to explain why here in this case I actually can't use more specific CSS rules myself to compensate this, but it's a fact. So my question is : is there a way to prevent a HTML element from being targeted by a CSS rule other than creating another rule or deleting the rule? The difficulty is that a rule like
.containter1 .containter3 { ... }
will target an element inside :
<div class="container1">
<div class="containter2">
<div class="containter3">Element
...
Elements inside the page don't make "walls" for CSS rules, which "jump" over containers to target elements. So a rule like
img { ... }
will target any img tag. The only way I know to compensate this is to create a more specific CSS rule targetting the precise img to protect. But I cannot do that here. Is there a way to get the same result without creating a CSS rule, only by adding HTML?
/* EDIT TO CLARIFY */
I know CSS rules, specificity, inheritance, etc. My question was more pragmatic. Consider this example to clarify the problem : imagine you have a client's stylesheet that you can't touch and that defines the following general rule:
img { display:none; }
The problem is that you cannot set a corresponding generic rule to do the opposite, like :
img { display:not-none; }
because there is no such thing as the opposite to none. The opposite of "none" can either be "inline", "block", "inline-block", and so on.
So basically, this means that the first generic rule forces you to explicitly define the display property for each and every img in your page. And that sucks. So I was trying to find a hack to solve situations like this (my actual problem is even worst than this, believe me, but this example is much clearer and quicker to explain).
If you're saying you want to prevent targeting without changing any code, then no, that's obviously not possible.
In-line styles always over-ride style-sheet rules ( unless they're using an !important tag, then you'll need to also use it).
You should be able to reset whatever elements you need, using syntax from your favorite CSS reset. Here are some options:
http://www.cssreset.com/
So, something like -
<div style="border:0 !important;padding:0 !important;margin:0 !important;height:auto;"></div>
is your best bet.
The only way you can change CSS for specific element is modification of existing styleshits or creating new style which is more specific and will overload other styles.
and I have to make my little block of code "fit" inside this.
Once you have make some block of code, you can put style tag inside that block of HTML code like this, for instance:
<div id="block_of_code_available_for_modification">
<style type="text/css">
//css code which will fix styles of your content without influencing other elements on a page.
</style>
</div>
Or, if you have just a few elements you need to fix styles for, you can use style attribute of HTML elements (once you can set modify HTML, you can always add something like below... Well, the same as adding style tag). Priority of css properties inside style attribute is the highest one. Except if there is no !important in some previouse styles:
<img style="any css properties you need" src="..." />
The default display value for an img element is inline-block. If you want to reset the display value for all images, why not use that?
If you've got multiple different types of elements that are being set to weird values, then the problem is maybe a bit more complex as you'd need to consider which elements to set to what display type. But all HTML elements do have well-defined default display types, so it shouldn't be too hard to reset them all.
img {display: inline-block;}
span, a, etc {display:inline;}
div, etc {display:block;}
... etc ...
If it comes down to it, you could just use one of the reset CSS scripts that are available, to set everything back to the correct defaults.
No there is no way you can stop other rules from getting applied on a particular element.
you have to redefine all those rules for that html element so they will overwrite all the other rules.
Let's say I have some deeply nested markup that I want to target with CSS. It could be anything, but for example:
<div>
<div id='someid'>
<span class='someclass'>
<a class='link' href='alink'>Go somewhere</a>
</span>
</div>
<div>
Is it acceptable to write a CSS rule targeting the <a> tag directly, like this?
a.link { font-size: large; }
Or is this considered non-standard that may fail in some browsers? Do I need to target each element in the chain like this?
div div span.someclass a.link { font-size: large; }
Both are completely acceptable to use and the answer depends on your specific solution. For instance if you have other areas where you are sharing common properties that are defined by that class you'd want to keep it as general as possible. If for instance you have a navigation and the links in that area share some common elements those could be defined by a.link
Then in your nested html, you might do something like
.someclass a.link {font-size:8px} to make that text smaller.
Here is an article that discusses how the specificity works: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Both are perfectly valid, and which one you use depends on what you want to do.
If you are creating a generic class that you want to be able to use throughout your entire site regardless of element and where the element is, you should only use .class. A good example for this is something like .icon which you may want to use on links, list items, headings etc. And you want to be able to use them everywhere.
If you're creating a class that is specific to/only works on one certain type element, it's best to use the element in the selector as well. An example of this would be a bullet list you want to display on one line, since this class requires the HTML to be a <ul> you should specify it in the CSS as well; ul.inline. This way you can use the "inline" class name for other elements as well, without the styling affecting both.
If you're only using the class in order to select the element but it shouldn't have any generic styling you should be specific. For example, you may want the first paragraph in your #blog-post element to be larger, then you should specify both #blog-post and the class; #blog-post p.first (note that these types of classes are rarely needed anymore thanks to advanced selectors like :first-of-type, h2 + p etc).
Saying that ".link is the best, a.link is second best and a long selector is bad" is just wrong. It all depends on the situation.
The more targeted you make your CSS the less flexible it becomes. It's your own trade off. If you are going to give the links a specific class like that I am pretty sure they'll be visually the same whether they appear inside this tree or outside of it so you can stick with your first example.
It's actually recommended to use a.link instead of the long, ugly second option, which can cause specificity and performance issues.
It's even better if you use just .link. That's the best option.
a.link is the best way to do it. If you want a certain a.link to be different from the rest, you'll need to add some weight to it.
a.link { ... } /* Global */
span.someclass a.link { ... } /* Finds all a.link within span.someclass */
Descendant selectors (line 2) aren't the most efficient way to add style to an element, so use them sparingly. Personally, I use them when I need to give special styles to a Global Class within a certain ID/Class.
I am currently restyling a website, but part of the site takes a string from the CMS and puts it into a description area. The description often has its on HTML, such as bullet points.
The problem is the designs we received also use bullet points to style certain aspects, which make everything within this description area styled entirely incorrectly (tiny width for ULs, background applied to H2, etc).
Is there any kind of tag that will reset the styling of everything within it?
Thanks in advance.
Edit: I've gone for this solution, which works when I apply the class 'CMSReset'. It resets the main offenders, thanks for the help:
div.CMSReset, div.CMSReset *
{
margin:0pt !important;
padding:0pt !important;
vertical-align:baseline !important;
width:auto !important;
background:none;
color:inherit;
}
short and simple: no, you'll have to reset the stylings taht need to be reseted on your own.
a workaround would be to use an iframe wich would prevent the inner content against inherited styles, but that solution is even worse in my opinion.
this other topics might also be interesting for you:
reset multiple css styles for one single div element
how to not inherit? or how to reset inherited width to the value before? (css)
Generally, people override CSS Styles in 2 ways:
1) They define an inline style on the attribute itself so:
<div style="background-color:#FFFFFF"></div>
Would override any other style.
You can also apply a style via an id (#IdName) which will have precedence
2) They redefine the style at that level of the document. You can use the !important css modifier (but this isn't universally supported).
If you've blanket applied styles, like div or body > div then these can be difficult to override and often require restructuring, or rethinking, your styles and classes.
I have a div with class "class1" . And a class: .class1 input {etc} so that all the inputs in the div get styled.
Is there away to make sure one specific input in the div does not get styled, but instead keeps the default input styling/button?
Since there is no :not selector in CSS 2.1, your best bet would be to assign classes to all of the inputs that you want to have a certain style. Then, target them like this:
.class1 .inputclass1
and then your other input (the one that needs default styling) won't be affected.
If you want to use CSS 3, then you can use :not like so:
.class1:not(.defaultclass1)
and give defaultclass1 to the element you want to have default styling.
You can either:
(1) Amend .class1 input {etc} to .class1 input.a {etc} and apply the style a to all your inputs bar the special one.
or
(2) apply an inline style to the special input in question resetting its format.
in a situation like that you have two kinds of inputs in this div. one that should be styled and one that shouldn't. You basically have two classes of inputs, but you haven't givven them class names. I would suggest giving them class names (e.g. styled and nonstyled or what not) and basing your css off of that. Otherwise you could use a pseudoclass, but that I'm not too sure on.
You can take a look at the :not() selector. However, this is not supported by IE. Probably easiest to provide a CSS over-ride for the specific input that you would like to be "default" styled.
in case you are planning to support all browser which do not support CSS3. You can over-ride the rule by making another class. like
.class input {etc}
and then over-ride etc rule by giving some other class to that input e.g. .notClass
input.notClass {over-ride etc }
You can use .class imput[type]{} if this is another type of input
Best way is use a class for that all input like .class1 input.all{} and leave the non style one without any class