I'm looking to edit the content of a H2 class within another block of classes but struggling to make it work.
Here is the class list
<header class="mainHeader">
<li id="xyz_insert_html_widget-2" class="widget-1 widget-first widget-last widget-odd widget widget_xyz_insert_html_widget "><h2 class="box">Live Now - Podcasts</h2>
I'm trying to edit the content of the H2 which contains "Live Now - Podcasts" with no luck
I've tried a lot of things with no avail, the last thing I tried was
#mainHeader li#xyz_insert_html_widget-2.widget-1.widget-first.widget-last.widget-odd.widget.widget_xyz_insert_html_widget h2.box
Using the content property content: "TEXT HERE";
Any help in pointing me in the right direction is appreciated!
Try
.box{
content: "TEXT HERE";
}
This because with css you can just reference the specific element class name that you want your properties to apply unless you have those on other area of your documents.
In that case either assign an id to it so to reference it like this:
#exampleid{
content: "TEXT HERE";
}
or following your line, being case specific:
header > li > .box {
content: "TEXT HERE";
}
Related
I'm beginning to learn more about CSS formatting and now I've picked up ABEM to use along with SCSS to develop a WordPress site.
Is it then valid to add a modifier directly to let's say an h1 block? Like this:
HTML
<h1 class="-green">To make the text green.</h1>
CSS
.-green {
color: green;
}
Or do I need to add a block or an element before to modify it instead?
Like this:
HTML
<h1 class="a-heading_text -green">To make the text green.</h1>
CSS
.a-heading_text.-green {
color: green;
}
ABEM is a BEM variant and a lonely modifier wouldn't be BEM-compliant. Your second option is the right one: you "need to add a block or an element before to modify it instead".
If you want to create a standalone helper for a simple purpose, then it is not a modifier but a block:
<h1 class="green">To make the text green.</h1>
With the CSS:
.green {
color: green;
}
This helper block can of course be mixed with other blocks or elements. The following code is valid:
<h1 class="a-heading_text green">To make the heading text green.</h1>
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.
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"; }
is there a way with pure css to Have a link that might say "New! Watch Video" and then once someone has clicked the link have it remove the "New" portion of the link. I'm assuming this can be done w/ Jquery but I'd like to see if there is an way to remove it with just css.
Rather than removing words, add the word "New" if the link hasn't been visited yet
a:before {
content: "New! ";
}
a:visited:before {
content: "";
}
No extra markup, and you don't need to put the word "New" everywhere.
Wrap the "New!" in a span inside the anchor:
<a class="newText" href="somepage.html"><span>New! </span>Watch video</a>
and in your CSS, set:
a.newText:visited span { display: none; }
I would recommend using a class on the anchor (like "newText" above) so that this formatting will only be applied to the links you want it on. And keep in mind that the "New!" text will reappear if the user clears their browser history.
Assuming the anchor will take you to a new page you can use the following technique:
a:before {
content: "New! ";
}
On any page you wish to remove or change it, you can add a body class
body.blah a:before {
content: "";
}
I've got CSS on my links depending what type of link it is. In this case it's password protected, and external link.
So I've got CSS like this:
a.external-link:after { padding-left: 2px; content: url(../images/icon-external-link.gif); }
a.restricted-link:after { padding-left: 2px; content: url(../images/icon-lock.png);}
However when I try something like this:
<a class="external-link restricted-link" href="some link">Some Link</a>
It only displays the last icon, in this case the icon-lock.png. Which makes sense, since the content value can only be set once not combined, so the last class declaration is overwriting it. Is there anyway to combine these two so I can mix and match these link classes easily (I've got 4 total). I don't want to make separate classes/images for each combo.
Hate to break it to you, but you're going to have to make separate classes/images for each combo. Especially as there would be no way of knowing which content should go first.
a.external-link.restricted-link:after
{
content: url(ext) url(res);
}
vs
a.external-link.restricted-link:after
{
content: url(res) url(ext);
}