I know this has been asked before here. But let me put my problem in a different way. I am using PHP and would like to show a HTML string coming from database in my page. But the problem is as the CSS of the page is of a generic style, it's taking the them in the HTML string also. But I want it to show without any styling whatsoever. I have gone through some searching the internet only to find about the "not" selector of CSS. I would like to know whether there is a way to identify a single element in my html page that would “not” take the general styling/css? What “not” does is specify all other element and “not” the one in the argument. I just want the opposite.
<style>
.div-class p{font-weight: bold;}
.div-class p:not(.no-style){font-weight: normal;}
</style>
<div class="div-class">
<p>This should be bold.</p>
<p class="no-style">This should not be bold.</p>
</div>
I would like the “p” with the “no-style” class to have a normal font weight. It’s currently the opposite. I hope to have made myself clear.
Thanks,
You may place your script output in div with certain id/class. And reset css to this div. There are a lot of various css resets available.
P.S. IMHO there is no css rule to disable all css for certain elements.
P.P.S. You may create an empty iframe (src="about:blank") and place your content there with javascript.
<style>
.div-class p
{
font-weight: bold;
}
.div-class p.no-style
{
font-weight: normal;
}
</style>
<div class="div-class">
<p>This should be bold.</p>
<p class="no-style">This should not be bold. </p>
</div>
Edit: see it working: http://jsfiddle.net/C3jqc/
Edit 2: you can't avoid heritage. You could use "not" in your CSS in this way:
<style>
p:not(.unstyled){
font-weight : bold;
}
</style>
<p> this should be Bold</p>
<p class='unstyled'> This shouldn't be bold</p>
Then add the "unstyled" class to every content you create from your PHP and the ":not(.styled)" to every CSS declaration.
Another option is to redefine every style in your CSS to match my original response.
Bear in mind the availability of the "not" selector across browsers.
there is a simple way to override the styles applied
you can use !important
for example
p{
font-weight:bold;
}
will not be applied if u have
.nostyle
{
font-weight:normal !important;
}
JSfiddle
Related
Can I use global div and give properties without using class or id?
Example
div{
font-family:"Arial";
font-size: 14px;
}
It is not considered a bad practice, it is just one of many ways to create a rule in CSS. By setting this directly on the div tag, you are creating a default rule for the tag, which is a practice that browsers follow as well. For instance, the user-agent stylesheet for Google Chrome specifies that the default rule for div tags is the following:
div {
display: block;
}
you can use TAG name or .classname or #ID of the element in CSS!
example:
div {} `Tag name : <div></div>`
.mydiv {} `classname : <div class="mydiv"></div>`
#mydiv {} `ID : <div id="mydiv"></div>`
yes, you can use global div and give it properties without using class or id.
An approach like this using your example above
<style>
div {
font-family:"Arial";
font-size: 14px;
font-style: italic;
}
</style>
<div>Changed Div default values </div>
or this,
<div style="background-color:lightblue">
<h5>div using global attribute "style"</h5>
</div>
And no, it is not a bad practice.
class is mostly useful when you have more than one element that would share the same style for consistency of the page or site.
id should be unique and can only be used once(single element). Ideally, used in main div.
But overall, they can be omitted if you think that you won't be needing them now and in the future.
I would like to create a div, so its subnodes can not override my default CSS class.
For example :
.content { color:red; }
<div class="content">
<p style="color:green">Hello</p>
<p style="color:blue">World !</p>
</div>
I would like the text color to be 'red'. The reason is that the content of the div comes from human inputs and I don't want them to modify font, color, size...
I think than "color:red!important;" doesn't work for subnodes.
I think than "color:red!important;" doesn't work of subnodes.
You could write a selector like .content, .content * { } … but then the submitted data could override it by using !important in the style attribute, so it wouldn't be an effective solution.
The only way to do this is to change the style attributes on the paragraphs. This is impossible to do from a stylesheet.
The quick and dirty option would be to use JavaScript to loop over all the elements and remove the styles.
The better approach, since you said:
the content of the div comes from human inputs and I don't want them to modify font, color, size
… would be to put some proper XSS protection in on your server that would sanitise the external input.
You should use a DOM aware white-listing parser (such as HTML Purifier if your server side code is written in PHP) for this.
Indeed you can use !important to override styles defined in sub-nodes, I have modified your .content class a little, run code snippet to see
.content * { color:red !important; }
<div class="content">
<p style="color:green">Hello</p>
<p style="color:blue">World !</p>
</div>
I have the following HTML markup:
<h1>
<div class="sponsor">
<span>Hello</span>
</div>
World
</h1>
When I use the CSS selector h1 I get Hello World.
I can't unfortunately change the markup and I have to use only CSS selectors because I work with the system that aggregates RSS feeds.
Is there any CSS selector which I can take only the text node? Specifically the World in this example?
The current state of CSS can't do this, check this link: W3C
The problem here is that the content you write to the screen doesn't show up in the DOM :P.
Also ::outside doesn't seem to work yet (at least for me in Safari 6.0.3) or it simply doesn't generate the desired result yet.
Check my fiddle and then check the DOM source: JSfiddle
Finally there are attribute selectors a { content: attr(href);}, making CSS able to read DOM-node attributes. There doesn't seem to be a innerHTML equivalent of this yet. It would be great tho if that was possible, whereas you might be able to manipulate the inner markup of a tag.
Bit of a workaround:
h1 {
color: red;
}
h1 * {
color: lime;
}
<h1>
<div class="sponsor">
<span>Hello</span>
</div>
World
</h1>
This is almost the opposite of a question I asked last week: Is it possible to select the very first element within a container that's otherwise pure text without using classes or identifiers in pure CSS?
The short answer is no. "World" in this example isn't an element of its own - therefore there isn't a way to select it.
What you would have to do here is style the h1 then override that styling with div.sponsor. For instance, if you wanted "World" here to have a black background with white text you woud use something similar to:
h1 {
background:black;
color:white;
}
h1 div.sponsor {
background:white;
color:black;
}
Unfortunately, however, this wouldn't work if you were only wanting the word "World" styled and your markup had more than just that within <div>Hello</div> World Foo, for instance.
I don't believe it would be possible with pure CSS to style just "World" in this situation.
I also met same problem, where I can't touch the markup and have no control with js.
I needed to hide a text nodes in a div element, but the element to remain visible.
So here is my solution:
markup:
<div id="settings_signout_and_help">
<a id="ctl00_btnHelpDocs" class="ico icoHelp" href="http://" Help Guide</a>
Signed in as: <a id="ctl00_lUsr" href="Profile.aspx">some</a>
Home
Sign out
</div>
css:
#settings_signout_and_help {
font-size: 1px !important;
}
#settings_signout_and_help a {
font-size: 13px !important;
}
Hope this helps guys!
I had a similar problem where I had to remove the "World" text from html generated by a C# function.
I set the font-size to 0 on the 'h1' element and then applied my css to div class. Basically hiding the extra text, but keeping content in the div.
I don't know how to do it with just CSS, but...
Using JQuery, you could select all the elements inside except the stuff inside its child element
$("h1:not(h1 > div)").css()
and put whatever CSS effect you want inside there.
I am working on a website management utility for a friend of mine. In the index page, I have a link to a CSS stylesheet that came with a template I've bought. I use CKEditor to edit files, but the CSS stylsheet applies many bad styles to the editor.
I am not quite familiar with CSS (that's why I bought the template...) and I want to unlink the stylesheet only from the div/tag. I don't want to unlink it from the whole page, because it uses the stylesheet.
<div style="UNLINKED"> [CKEDITOR CODE GOES HERE] </div>
I don't know if it is possible, but I need to do something with it.
Thanks!
You must override the styles, there is no way to "unlink" a specific element from the page styles.
Therefore, for example, if your stylesheet defines bold text for all paragraphs like this:
p { font-weight: bold; }
you have to override that to bring the paragraph back to normal text:
div.unlinked p { font-weight: normal; }
Assign a class to the div and create style for it- the styles defined in the class will override global styles.
div.nostyle {
margin: 0;
padding: 0;
text-decoration: none;
border: 0 none;
}
<div class="nostyle">CKEDITOR CODE</div>
It cannot unlink the stylesheet once if was linked on the beginning.
Only some circumstances can help:
put the all the <div ... </div> period into an iframe.
or override all the style elements of the div
In this case, I would advise embedding the code into an iframe element. Otherwise, there is no way to avoid the cascade without overwriting every rule affecting the content with more specific rules.
ok, so the solution may be different for every dev. if it's ckeditor, try deleting the table selectors. for me the problem was with the <td> selector. thanks for the answers...
Easy! All you have to do is delete the code at the top of the HTML! Once you do, the page automatically unlinks from the stylesheet. No need to override what was provided. :)
I'm fairly new to CSS, so I want to ensure I'm implementing it correctly. I need to include an explanatory paragraph on a web page. I'd like it to look different, so I've included the following in the external CSS file:
div.usage { font-style: italic; margin-left... margin-right... ; }
and then included <div class="usage">Explanation</div> in the HTML file. This is working as expected.
My understanding is that when using CSS, content and layout are separated. How, then, would I underline some text in my explanation? My understanding is that I should avoid the following: <div class="usage">This is <u>very</u> important.</div>.
You are right about separating content and layout, but in this case, I would wrap it in a tag. The <u/> tag is deprecated, though. What I would use, is something like this:
<div class="usage">This is <em>very</em> important.</div>
and
em { text-decoration:underline; }
The <em/> stands for emphasized text. The default is italic, so depending on your CSS reset, you may need to also reset font-syle to normal.
As an aside, it's usually a bad idea to underline text, as most people assume underlined text are links. I would make it bold instead, or maybe even give it a background color.
As you say, HTML is for content and CSS is for styling. So, you don't have to use styling stuff in your HTML. Indeed, when you think in HTML you must think in content as well in a semantic way.
So the class you use for your div.usage is very well chosen, because it doesn't say anything about its style, but about its semantic. Now, what about the text you want to underline? I would say that in a semantic way this is a text you want to highlight, and HTML has a good element for this: <strong>. Then, in your HTML you can override the browser default style for <strong> elements (bold) for the underline you want.
<div class="usage">This is <strong>very</strong> important.</div>
strong {
font-weight: normal;
text-decoration: underline;
}
If you want to have this style only for highlighted text inside of your div.usage element, then be more specific:
.usage strong {
font-weight: normal;
text-decoration: underline;
}
Surely, you don't want to add the div to the selector (i mean .usage better than div.usage). This way you are ready in case you are going to code, for example, a list or a pragraph with the usage semantic.
The "text-decoration: underline" property allows you to undeline text.
You should use one of these tags: <strong> or <em> and style them in the css.
.usage strong { font-weight: bold; }
In your markup you define some content that you want to emphasize (<em>) or strongly emphasize (<strong>). See http://www.w3.org/TR/html4/struct/text.html.
I would not use underline for emphasizing as this will confuse users in thinking it's a hyperlink.
Just a bit of friendly advice, it's a good idea not to use underline on the web, as it is very often confused with a clickable link.
I would suggest using
<strong>this is important</strong>
Which will appear bold by default.
Or perhaps you could use a yellow background on the text, like a highlight marker...
<p>text <span class='highlight'>hightlighed</span> text</p>
And put this in your CSS
span.highlight {
background-color: #FF9;
}
you can try this:
<div class="usage">This is <span class="underline">very</span> important.</div>
css:
.underline { text-decoration: underline; }
hi for underline you can take a small example here
HTML
<div>
<p>
This is just a text to check <span>underline</span> with CSS
</p>
</div>
CSS
div p { font-style: italic; }
div p span{ text-decoration: underline;}
Nowadays, people use to say that <u> markup should not be used, but few people can back this up with factual arguments (as opposite to citing purported authorities and using negative-sounding adjectives). If you really want underline (which is generally not a good idea in HTML documents, as pointed out here), then <u> is the simplest and most robust way. You would still have the liberty of later deciding that you wish to use, say, bolding instead of underlining, and then you could do it simply in CSS:
u { text-decoration: none; font-weight: bold; }
For emphasis, other methods are almost always better than underlining. But there are situations where underlining is part of a conventional notation (e.g., in phonetics or mathematics), and then you might want to use <u> (and you would not want to rely on CSS).
You could encapsulate the text you wish to underline in span and specify a class for that span
.underline {
text-decoration:underline;
}
<div class="usage"> This is <span class='underline'>very</span> important.</div>