Is it possible to add pseudo element declaration inline. For eg. can I do the following inline ?
.XYZ:after {
content: '';
width: 100%;
display: inline-block;}
<div class="XYZ"></div> /*Pseudo element should be declarer inline*/
No, it is not possible to apply pseudo selectors via inline CSS, that's only possible from within <style></style> blocks or external stylesheet file.
Imagine constructing an email template with inline pseudo selector that uses content property, bad guys could have done the harm I suppose. So it is not possible.
No. pseudo element stylings may only be declared in an external stylesheet or inside <style></style> tags.
Hacss may provide the experience you're looking for.
Demo
Related
I have a file like
<div>
<div class="abc">
<div>
<!--some more divs inside-->
</div>
</div>
</div>
What I want to do is to apply styles only to the first div. I tried to use div:not(.abc, .abc *), div:not(.abc):not(.abc *), div:not(.abc), div:not(.abc) * but none of these worked. It would be hard to edit the html, because there would be many files to be edited. Also the code shown above appears in different places, so using > selector is not the solution... Does someone know how to do this?
You cannot reliably use the :not() selector in CSS for excluding an element and/or its descendants. The reason for it is explained in this answer (and some others that it links to):
You can't use combinators. This works in jQuery, but not CSS:
/*
* Grab everything that is neither #foo itself nor within #foo.
* Notice the descendant combinator (the space) between #foo and *.
*/
:not(#foo, #foo *)
This one is particularly nasty, primarily because it has no proper workaround. There are some loose workarounds (1 and 2), but they usually depend on the HTML structure and are therefore very limited in utility.
And since your markup is unpredictable enough that you cannot edit it or use the > selector, I'm afraid there's not much of a way out for you other than to either find a way to apply a class to your top div and use that class, as demonstrated by Fluidbyte, and/or use jQuery, as implied above.
I usually find it's easier to include what you need via a class then try to exclude descendant elements. See the fiddle here: http://jsfiddle.net/cLtHg/
That takes care of inheritance issues and is much more cross-browser friendly.
If you're really not touching the HTML, then a simple although dirty approach would be to apply styles to the first div and then remove them from subsequent divs, like so:
div {margin-bottom: 20px; border: 1px solid #ccc;}
div div {margin-bottom: 0; border: none;}
The major drawback here is that some styles in the child divs may get removed unintendedly. Depends on how they're styled in the first place.
Use :first-child with the ID or Class of its parent Element. If you are unable to catch the element using CSS, it is suggested to use Javascript or jQuery.
Have you tried :first-child or :nth-child() selecor?
If in my webpage, i have all the three css defined for a div
Inline
Internal
external
I know that browser first looks for 1)Inline then for 2)Internal and last, it looks for external css.
but i want to call only external css, how it would be done?? Can i do it through !important or there is any other way?
There is no difference between internal and external style sheets. Which styles are applied depends on:
Specificity
Declaration order
Inline styles are the most specific, then identity rules (#), then class rules (.), then element rules.
For two rules that have the same specificity, for example div .main and span.title, both rules apply, but the one declared last takes over when they specify the same properties.
The only way to circumvent the precedence is to use !important.
Best thing to do is to put everything into an external css file.
If you must have inline styling then make sure you only have ones that aren't already defined
in your external stylesheet. i.e Dont duplicate/override styling. e.g, if you have the following in your css file:
div { padding: 5px; }
then dont have the following inline styling.
<div style="padding-right:2px;" />
Just put it into the css file
div { padding: 5px 2px 5px 5px; }
Like you said, you can use !important if you have to override a styling for just one page that doesn't apply to the other pages in your site.
1)Inline then for 2)Internal and last, it looks for external css.
No. There is no difference in priority between CSS included with <style> and CSS included with <link>.
but i want to call only external css, how it would be done??
You cannot cause CSS included via <style> or CSS included via the style attribute to be ignored.
Can i do it through !important or there is any other way?
You could apply !important to every rule and then hope that no rule included via <style> or style also has !important… but that way lies madness.
Is it possible to prefix the "li" items with a small image ? I didn't find a suitable css attribute for it.
You can use an image for the bullet point:
ul { list-style-image: url("fancybullet.gif"); }
Failing that, you cold set the list-style-type to none, and then use CSS to place an image in the right place, like in this article.
You could use the CSS :before pseudo-selector.
li:before { content: url(image.jpg); }
Note this may not work completely correct in IE8 and below. Here's some more information on the :before and :after selectors.
I feel you may be better off doing this in Javascript however using a library like jQuery. I assume this is a problem that needs a dynamic solution after HTML is rendered to the screen, in this case it may be best to use Javascript.
Is it a good practice to keep adding
style="padding: 0; margin: 0; display: block;"
to each and every image?
No, it's better practice to use external stylesheets to do the same thing:
img {
padding: 0;
margin: 0;
display: block;
}
This will target all images in which the stylesheet is loaded. This can be overridden by the use of more specific selectors, such as id-based (img#theImageID or, more simply, #theImageID will target an <img id="theImageID" src="path/to/image.png" />), or class-based (img.imageClass or, again more simply, .imageClass. The former will select: <img class="imageClass" src="path/to/image.png" /> the latter will select the same element, but also any other element that has the same class-name).
Edited due to response/question from OP:
[Even] in case of html emails?
HTML emails are the one special case for this rule, HTML emails typically don't load, or can't load, external stylesheets. And seem to have trouble with style blocks, so in that case, yes. You still have to use in-line styles. Unfortunately.
Further reading:
W3.org.
SitePoint.
It's surely better to create a class with the style properties, like the following:
img.imageclass {
border: none;
margin: 20px;
padding: 10px;
}
Why it is not recommended to use inline styles. Because if you use an in-line style, you'll not be able to affect on that element from browser specific style-sheets. For example, if you create an element and see that it needs some "tweak" to look good in IE6, for example, the IE6 specific style-sheet will not work if you explicitly put an inline style for that element since the in-line style will be "lower" and thus will have higher priority.
it is good practice, but like #David Thomas said, it's better to do it in an external CSS file to keep from inline clutters.
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;
...
}