I inherited code that layers up a font heading - multiple divs draw the font - like this:
<div class = 'stage'>
<div class = 'layer'></div>
<div class = 'layer'></div>
<div class = 'layer'></div>
<div class = 'layer'></div>
</div>
The text itself is defined in the css under "layer.after" as "content: "xyz!"".
My aim is to style the "!" in "XYZ" in a different font... if the content was in the HTML section I could just add a span.
But here, my text is defined in Content in css.... How can I style the last letter differently than the rest in this type of setup, or add a span to the css, or even a short script to change the last letter (!) to a different font? I've tried last letter selector to no avail.
Using pseudoclasses on pseudoelements is not allowed. Therefore what you want is not possible without changing existing code.
Is there some actual text in HTML? If not you can use ::before for your text and ::after for "!" - JSFiddle
CSS
.layer::before {
content: 'xyz';
color: blue;
font-weight: bold;
}
.layer::after {
content: '!';
color: red;
font-weight: bold;
}
You'll need to use some script if changing the markup is not an option.
If you have jQuery available, try something like this:
$(function() {
$(".stage .layer").each(function() {
var content = $(this).html();
content = content.substr(0, content.length - 1)
+ "<span>"
+ content.substr(-1)
+ "</span>";
$(this).html(content);
});
})
See http://codepen.io/ondrakoupil/pen/VLBoXR for live example.
Related
I would like to select anchor tags only when they're completely by themselves, that way I can make those look like buttons, without causing anchors within sentences to look like buttons. I don't want to add an extra class because this is going within a CMS.
I originally was trying this:
article p a:first-child:last-child {
background-color: #b83634;
color: white;
text-transform: uppercase;
font-weight: bold;
padding: 4px 24px;
}
But it doesn't work because text content isn't considered as criteria for :first-child or :last-child.
I would like to match
<p><a href='#'>Link</a></p>
but not
<p><a href='#'>Link</a> text content</p>
or
<p>text content <a href='#'>Link</a></p>
Is this possible with CSS?
The simple answer is: no, you can't.
As explained here, here and here, there is no CSS selector that applies to the text nodes.
If you could use jQuery, take a look at the contains selector.
Unfortunately no, you can't.
You have to use JS by it self or any librady of it to interact with content of elements and found where is each element in the content.
If you wish me to update my answer with a JS example prease ask for it.
I don't think it's generally possible, but you can come close. Here are some helpful places to start:
The Only Child Selector which would allow you to select all a elements which have no siblings like so a:only-child {/* css */}. See more here. (Also see edit)
The Not Selector which would allow you to exclude some elements perhaps using something along the lines of :not(p) > a {/* css */} which should select all anchors not in a paragraph. See some helpful information here.
Combining selectors to be as specific as possible. You might want all anchors not in an h1 and all anchors not in a p.
Example:
The final product might look like this:
a:only-child, :not(p) > a {/* css */}
This should select all anchors that are only children and anchors that are not in a paragraph.
Final note:
You may want to consider making the buttons actual button or input tags to make your life easier. Getting the HTML right first usually makes the CSS simpler.
Edit: the only child ignores the text, so that's pretty much useless here. I guess it's less doable than I thought.
jQuery Code Example:
// this will select '<p><a></a></p>' or '<p><a></a>text</p>'
// but not '<p><a></a><a></a></p>'
$('p').has('a:only-child').each(function() {
const p = $(this); // jQuerify
let hasalsotext = false;
p.contents().each(function(){
if ((this.nodeType === 3) && (this.nodeValue.trim() !== "")) {
hasalsotext = true;
return false; // break
}
});
if (!hasalsotext) {
$('a', p).addClass('looks-like-a-button');
}
});
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"; }
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
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.
How do I change the style (color) of a div such as the following?
"<div id=foo class="ed" style="display: <%= ((foo.isTrue) ? string.Empty : "none") %>">
<%= ((foo.isTrue) ? foo.Name: "false foo") %>"`
Try this:
in the .aspx file put thees lines
<div id="myDiv" runat="server">
Some text
</div>
then you can use for example
myDiv.Style["color"] = "red";
If you want to alter the color of the div with client side code (javascript) running in the browser, you do something like the following:
<script>
var fooElement = document.getElementById("foo");
fooElement.style.color = "red"; //to change the font color
</script>
If you wanted to change the class instead of the style directly:
ie.. create another class with the styling you want...
myDiv.Attributes["class"] = "otherClassName"
You should set your colors in CSS, and then change the CSS class programatically. For example:
(CSS)
div.Error {
color:red;
}
(ASP.NET/VB)
<div class='<%=Iif(HasError, "Error", "")%>'> .... </div>
Generally, you can do it directly
document.getElementById("myDiv").style.color = "red";
There's a reference here.
It looks like you are writing ASP, or maybe JSP. I'm not too familiar with either language, but the principles are the same no matter what language you are working in.
If you are working with a limited number of colours, then the usual option is to create a number of classes and write rule-sets for them in your stylesheet:
.important { background: red; }
.todo { background: blue; }
And so on.
Then have your server side script generate the HTML to make the CSS match:
<div class="important">
You should, of course, ensure that the information is available through means other than colour as well.
If the colours are determined at run time, then you can generate style attributes:
<div style="background-color: red;">
That code fragment doesn't say much - if the code is server-side why don't you change e.g. the class of the HTML element there?
IMO this is the better way to do it. I found some of this in other posts but this one comes up first in google search.
This part works for standard JavaScript. I am pretty sure you can use it to remove all styles as well as add/overwite.
var div = document.createElement('div');
div.style.cssText = "border-radius: 6px 6px 6px 6px; height: 250px; width: 600px";
OR
var div = document.getElementById('foo');
div.style.cssText = "background-color: red;";
This works for jQuery only
$("#" + TDDeviceTicketID).attr("style", "padding: 10px;");
$("#" + TDDeviceTicketID).attr("class", "roundbox1");
This works for removing it JQUERY
$("#" + TDDeviceTicketID).removeAttr("style");
$("#" + TDDeviceTicketID).removeAttr("class");