Is there any possibilities to apply different background colour for ::before last word
eg : `
<style>
.test::before{
content : 'stack overflow';
color: red;
}
</style>
<p class="test"></p>
`
In this above mentioned example, I want add different colour for "overflow" text,
any idea ?
To render the output you want to visualize, this could be a way:
.test::before {
content: 'stack';
}
.test::after {
content: ' overflow';
color: red;
}
<p class="test"></p>
But It's not appropriate. If your content is just decorative, why don't you put it into a <span>?
Related
I have a paragraph with several long lines of texts. I need to apply a different style to some of the words. What would be the proper way to do this without creating too many tags?
How about when using a react-intl format message?
<div className="main">
Select the Gear icon, and then choose Users > Manage users
</div>
.main {
font-size:14px;
}
I want to apply styles to Gear, Users and Manage users.
You can use one of the built-in tags to achieve this.
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
.main {
font-size:14px;
}
<div className="main">
Select the <b>Gear</b> icon, and then choose <b><i>Users</i></b> > <em><ins><sub>Manage users</sub></ins></em>
</div>
Or you can use the span tag to create inline elements in your text and then you can style them as you want.
.main {
font-size:14px;
}
#gear {
font-size: 1.1rem;
color: red;
font-weight: bold;
}
#users {
font-size: 1.3rem;
color: blue;
text-decoration: underline;
}
#manage-users {
font-size: 0.9rem;
color: gray;
text-decoration: overline;
}
<div className="main">
Select the <span id="gear">Gear</span> icon, and then choose <span id="users">Users</span> > <span id="manage-users">Manage users</span>
</div>
Update
The code below is an example how to style each word differently when you use react-intl FormattedMessage.
StackBlitz link.
render() {
const style = {
color: 'red',
fontWeight: 'bold'
}
return (
<div>
<p>
<FormattedMessage
id="userHint"
defaultMessage={`Select the {gear} icon, and then choose {users} > {manageUsers}`}
values={{
gear: <b>Gear</b>,
users: <i>Users</i>,
manageUsers: <span style={style}>Manage users</span>
}}
/>
</p>
</div>
);
}
I need to toggle text color from red to green and vice versa.
<div id="logoup">DEEP</div>
<button id='btn'>CLICK</button>
CSS
#logoup{
color:red;
}
.greened{
color:green;
}
JS
$("#btn").click(function(){
$('#logoup').toggleClass('greened');
});
Doesn't work. Console is empty.
jsfiddle
In CSS, an id's defined styles take precedence over an class's defined styles. You can simply attached the class name to the id to fix this without the the need to use !important which should only be used as a last resort:
JS Fiddle
#logoup.greened {
color: green;
}
You could use important on green, or you could control the coloring using classes, instead of applying it to the element.
Method 1: Use important! on the greened class
$("#btn").click(function() {
$('#logoup').toggleClass('greened');
});
#logoup {
color: red;
}
.greened {
color: green !important;
}
<div id="logoup">DEEP</div>
<button id='btn'>CLICK</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Method 2: Don't apply color to ID, use classes
$("#btn").click(function() {
$('#logoup').toggleClass('red green');
});
.red {
color: red;
}
.green {
color: green;
}
<div id="logoup" class="red">DEEP</div>
<button id='btn'>CLICK</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
id occupy highers css specificity than class . So class wont be able to over rules the styles set by the id.
Following changes will work
CSS
.logoup{ // id changed to class
color:red;
}
.greened{
color:green;
}
HTML
<div id="logoup" class="logoup">DEEP</div>
<button id='btn'>CLICK</button>
JSFIDDLE
When you use id instead of class you must remember about css rules prioritization. The style that has the highest CSS specificity is applied. The specificity of different elements is defined as follows:
ID attribute = 100
Class attribute = 10
Element = 1
To check this rewrite your css:
#logoup{
color:red;
}
.greened{
color:green!important;
}
Read about css rule priorities.
Selector Priority. Override it using !important;
$("#btn").click(function() {
$('#logoup').toggleClass('greened');
});
.greened {
color: green !important;
}
#logoup {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logoup">DEEP</div>
<button id='btn'>CLICK</button>
I have this in css:
#loading{
display:none;
}
the problem is, i need to display none this loading div, that come with an id after loading name.
eg:
<div id=loading1></div>
<div id=loading422></div>
<div id=loading9232></div>
I want to apply loading style in all this divs, can i do that? how would it be?
thank you!
I want to apply loading style in all this divs, can i do that?
Yes, with an attribute starts with selector:
[id^=loading] {
display: none;
}
That matches any element whose id attribute starts with loading.
Example:
[id^=loading] {
color: blue;
}
<div id="loading1">loading1</div>
<div id="loading12">loading12</div>
<div id="loading123">loading123</div>
<div id="notloading">notloading, so not affected</div>
<div id="loading">loading with nothing after</div>
hello freind you can put an class attribut and name it loading
like this
<div id=loading1 class="loading"></div>
<div id=loading422 class="loading"></div>
<div id=loading9232 class="loading"></div>
and call it in your css like this
.loading{
display:none;
}
that's can be better than id class is good
i hope to find that is helpfull
Try this:
div[id^=loading]{display:none;}
Refer this link for more details
Examples:
/* All spans with a "lang" attribute are bold */
span[lang] {
font-weight:bold;
}
/* All spans in Portuguese are green */
span[lang="pt"] {
color:green;
}
/* All spans in US English are blue */
span[lang~="en-us"] {
color: blue;
}
/* Any span in Chinese is red, matches simplified (zh-CN) or traditional (zh-TW) */
span[lang|="zh"] {
color: red;
}
/* All internal links have a gold background */
a[href^="#"] {
background-color:gold
}
/* All links to urls ending in ".cn" are red */
a[href$=".cn"] {
color: red;
}
/* All links to with "example" in the url have a grey background */
a[href*="example"] {
background-color: #CCCCCC;
}
On my website I have some hide/show JavaScript (below). It is used commonly in FAQs where you see a list of questions and when rolling over the question it changes color and clicking on it opens text.
I would like the cursor to change to a "finger pointer" (the usual shape of when something is linked) when rolling over the text.
What should be added to the code below?
The words MY TEXT represent the various text I put in specific to my site.
Thank you!
<a onclick="javascript:ShowHide('item')"> MY TEXT </a>
<div class="mid" id="item" style="display: none;"><p> MY TEXT </p></div>
<br>
<script type="text/javascript">// <![CDATA[
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
// ]]>
</script>
Add cursor: pointer; css rule:
<a style="cursor:pointer;" onclick="javascript:ShowHide('item')"> MY TEXT </a>
Also, you can make that JS a bit prettier:
<script>// <![CDATA[
function ShowHide(divId){
var el = document.getElementById(divId);
el.style.display = el.style.display === "none" ? "block" : "none";
}
// ]]></script>
I would also advise you: Don't use inline styles.
Create a stylesheet, use classes, style those classes, and than assign those classes to your HTML elements.
For example:
a {
cursor: pointer;
text-decoration:none;
color: orange;
/* etc... style here your anchors */
}
a:hover {
/* place here style for the hovered anchors */
}
.hidden { /* add that class to any HTML element you want initially hidden */
display:none;
}
Add cursor: pointer; in CSS to your element.
Let's say you want to add it to a div:
div { cursor: pointer; }
http://jsfiddle.net/a_incarnati/wnn3s0yk/2/
how to add diferrent style in same div name with jquery?
example like this.
<div id="link">
<div class="one">This is first link</div>
<div class="one">This is second link</div>
<div class="one">This is third link</div>
</div>
and i want to add different color for all text in .one
the first class one with #FFF
the second class one with #000
the third class one with #333
You can do this:
var $oneDivs = $("#link div.one");
$oneDivs.eq(0).css("color","#FFF");
$oneDivs.eq(1).css("color","#000");
$oneDivs.eq(2).css("color","#333");
That is, first select all of the divs by class, then pick out the individual ones by their (zero-based) index and set the required colours.
Demo: http://jsfiddle.net/8kNF6/
var colors = ['#FFF', '#000', '#333']
$('#link div.one').each(function(idx, elem) {
$(elem).css('color', colors[idx]);
});
I realize the question specifically asks how to do it with jQuery, but you do know you could do that with an nth-child css selector and not have to use javascript at all, right?
'just throwin it out there :)
#link div:nth-child(1) { color: #FFF; }
#link div:nth-child(2) { color: #000; }
#link div:nth-child(3) { color: #333; }