I wrote some dummy css. Instead of a tag I got escaped characters. How can I add a div tag instead?
.HeaderName:after{
content: "<div class=\"Name2\">text</div>";
}
.Name2 {
color: red;
}
The content declaration cannot add tags to the page (tags are structural); additionally, CSS is meant for presentation changes, not structural content changes.
Consider using jQuery, instead, such as:
$(".HeaderName").after("your html here");
If you need that extra tag only to make the added text red, just do this:
.HeaderName:after{
content: "text";
color:red;
}
Tested on Chrome.
You can't insert tags using content: in CSS. Here is the relevant part of the spec; see the 'content' property in the CSS 2.1 spec.
Related
I need to know if I can modify content on the last page with the :last selector.
I'm not sure if it exists, I see it being used in other stackoverflow answers like this: Footer on last printed page.
But I can't find it in the documentation and it does not work when I try to use it.
I'm trying to clear the content on the footer of my last page like this:
#page {
#bottom-right {
content: "Please turn over";
}
}
#page :last {
#bottom-right {
content: none;
}
}
It works when I use it with the :firstselector. How can I get the effect for the last page?
I'm using Weasyprint to print PDF files.
This can be achieved using named pages.
Create an element on the last page (or use an existing one that will appear on the last page) and assign it a last-page class.
Example below:
HTML
<div class="last-page"></div> <!-- Or add this class to an existing element that appears on the last page -->
CSS
.last-page {
page: last_page;
page-break-before: always; /* Use if your last page is blank, else omit. */
}
#page {
#bottom-right {
content: "Please turn over";
}
}
#page last_page {
#bottom-right {
content: none;
}
}
Tested with Weasyprint - worked a charm.
Based on the CSS3 Page docs it appears the :last pseudo-class was removed (or never included).
It might be possible to target the last page using the :blank pseudo-class if you can force a page break at the end of your document. This might have unwanted effects on other blank pages though.
I don't have much experience on UI development. I have a class defined in CSS, something like this-
.myclass {
color: red;
content: "my content";
font-size: 12px;
padding-right: 2px;
}
I want "my content" value to be internationalized (to be displayed as my content in English and something else in another language). Is that possible achieve it through CSS code?
I would suggest to separate your localization from CSS, since it is primarily meant for styling and you'll be probably localizing the HTML anyway. If it is possible for your to add another attribute to your HTML you could try using content with an attr() value to reference a data attribute from the selected HTML content. So with HTML like this:
<div class="myclass" data-value="My Content"></div>
You can access the data attribute like this:
.myclass:before {
content: attr(data-value);
}
Keep in mind that the content property can only be used on pseudo elements. For further info I'd recommend you the MDN page about the content property.
I am not sure about it but most probably you are looking for this
http://www.w3.org/International/questions/qa-css-lang
The best way to style content by language in HTML is to use the :lang selector in your CSS style sheet. For example:
:lang(ta) {
font-family: Latha, "Tamil MN", serif;
font-size: 120%;
}
You could consider using CSS variables (i.e. var() with custom properties), if it blends in with your surroundings:
:root{
--text-my-content: "my content";
}
.myclass{
content: var(--text-my-content);
}
Thus, the localized portion is outsourced from the actual style. Now, you can define the locales elsewhere (e.g. generated from a text database or hard-wired in an i18n-only CSS file or even grouped together on the top of your stylesheet):
html[lang="de"]:root{ --text-my-content: "mein Inhalt"; }
html[lang="en"]:root{ --text-my-content: "my content"; }
html[lang="fr"]:root{ --text-my-content: "mon contenu"; }
.newclass {
content: "\00A9";
}
In the above code, a copyright icon shows up. I have a question and a requirement.
Question - Where is this icon come from? any image from my pc, internet or some other way.
Requirement - If I have to introduce a new code, and associate a new icon for that code, how to do it?
It's an unicode escape sequence,
here you can find some examples:
http://css-tricks.com/snippets/html/glyphs/
these works with pseudo elements and are unicode characters.
http://codepen.io/anon/pen/EFAtk
there a list here : http://unicode-table.com/en/
HTML test
©
<p> #
http://unicode-table.com/en/</p>
CSS test
:before {
color:red;
}
body:before {
content: "\00A9";
}
p:before {
content:'\0040';
}
How to change the color only from text except everything is between tags ?
Sample text:
<b>A7</b> <b>D</b>
this is a test
<b>A7+</b> <b>G9</b>
this is a test
Assuming that all of that text is wrapped in a parent element (I've used <div>, but almost any other element would suffice), as such:
<div>
<b>A7</b>
<b>D</b>
this is a test
<b>A7+</b>
<b>G9</b>
this is a test
</div>
Then you can't change "all the text except the <b> tags", because CSS won't allow you to style the text without affecting the colour of the the <b> elements, you can, however, style the div and then 'unstyle' the b elements:
div {
color: #f00;
}
div b {
color: #000;
}
JS Fiddle demo.
To do this with jQuery (and, honestly, from the information you've posted jQuery seems unnecessary), you'd have to create wrapping elements for each of the strings of characters that are not wrapped in b elements and then directly style, or add a class to, those elements:
$('body').contents().filter(function(){
return this.nodeType === 3 && this.nodeValue.trim().length > 0;
}).wrap('<span />').parent().css('color','red');
JS Fiddle demo.
References:
contents().
filter().
parent().
wrap().
Try:
body{color:red;}
b{color:black;}
Fiddle here.
You could use jQuery like this:
$('body').css('color', '#FFCCFF');
$('b').css('color', '#000000');
But if you can do it in CSS it would be better:
body {
color: #FFCCFF;
}
b {
#000000;
}
Since you tagged this as jquery, I just provided a solution for this with jquery, You may wrap the html which was written by you in a paragraph tag like below. And then you have to use the .addClass function of Jquery to set different classes with different colours for that both paragraph and bold tag.
HTML
<p><b>A7</b><b>D</b>
this is a test
<b>A7+</b><b>G9</b>
this is a test</p>
CSS
.Paragraph{
color:red;
}
.boldtext{
color:black;
}
JQUERY
$('p').addClass('Paragraph');
$('p > b').addClass("boldtext");
DEMONSTRATION
Is there a way that I can select a textarea such that $('#id_of_textarea').val() in jQuery will be ''? I tried using :empty. I saw that CSS provides a way to select empty inputs because the text is in the value attribute ([value=""]). Is there an attribute for the text in a textarea?
I'm looking for a selector that will work with CSS, not just jQuery.
Best solution I can think of is a CSS 3 workaround. Set the field to required (and unset it on submit if need be). Then you can use
textarea:invalid { /* style here... probably want to remove box-shadow and such */ }
this works in recent browsers except edge (at the moment):
textarea:placeholder-shown {
/* this should be active only when area is empty and placeholder shown */
}
so with jQuery for example you can pick all empty textareas:
$('textarea:placeholder-shown').val()
https://developer.mozilla.org/en/docs/Web/CSS/:placeholder-shown
If you're using React, then this is the solution:
textarea:not(:empty) {
// Apply css here
}
For instance,
/* Apply style when textarea contains text */
textarea:not(:empty) {
border: 6px solid blue;
padding: 6px;
}
Working demo:
Textarea - Select empty textarea using CSS
Note: While this works perfectly in React (because of re-painting caused by state update), It does not provide the same response if implemented using Vanilla HTML + CSS.
This works fine, as with input:
<textarea name="comment" id="comment" class="authority_body-input" data-val="{$form.comment}" onkeyup="this.setAttribute('data-val', this.value);">
textarea.authority_body-input:not([data-val=""]):not(:focus) {
color: red;
}
You can use the :empty css pseudo-class.
See an example in jsfiddle.
In the example there is a button for dynamically add new empty textareas to the DOM, so you can see that the new elements also are affected with the pseudo-class.
The code in the example was tested in Firefox 5.0, Opera 11.50 and Chromium 12.
Also, you can see a good description for the :empty pseudo-class here.
For those who are using AngularJS, you can use ng-class in your view to add a class to your textarea to know if it is empty or not.
HTML :
<textarea ng-model="myForm.myTextArea"
ng-class="(myForm.myTextArea.length)?'not_empty':'empty'">
</textarea>
CSS :
textarea.empty {
background-color:red;
}
textarea.not_empty {
background-color:blue;
}
Here is a jsfiddle.