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;
}
Related
I would like to apply a CSS file to a concrete DIV in my page. This is the page structure:
<link rel="stylesheet" href="style.css" />
...
<body>
<div id="pagina-page" data-role="page">
...
<div id="applyCSS">
(all the elements here must follow a concrete CSS rules)
</div>
...
</body>
I tried to apply the rules of the CSS file editing it like this (the CSS file is so large):
#applyCSS * { (For all the elements inside "applyCSS" DIV:)
.ui-bar-a {
...
...
}
.ui-bar-a .ui-link-inherit {
...
}
...
}
But that solution doesn't work. So, how can I do that?
#applyCSS > * {
/* Your style */
}
Check this JSfiddle
It will style all children and grandchildren, but will exclude loosely flying text in the div itself and only target wrapped (by tags) content.
You could try:
#applyCSS .ui-bar-a {property:value}
#applyCSS .ui-bar-a .ui-link-inherit {property:value}
Etc, etc... Is that what you're looking for?
.yourWrapperClass * {
/* your styles for ALL */
}
This code will apply styles all elements inside .yourWrapperClass.
I do not understand why it does not work for you, it works for me : http://jsfiddle.net/igorlaszlo/wcm1soma/1/
The HTML
<div id="pagina-page" data-role="page">
<div id="applyCSS">
<!--all the elements here must follow a concrete CSS rules-->
<a class="ui-bar-a">This "a" element text should be red
<span class="ui-link-inherit">This span text in "a" element should be red too</span>
</a>
</div>
</div>
The CSS
#applyCSS * {color:red;display:block;margin:20px;}
Maybe you have some special rules that you did not share with us...
If you're looking for a shortcut for writing out all of your selectors, then a CSS Preprocessor (Sass, LESS, Stylus, etc.) can do what you're looking for. However, the generated styles must be valid CSS.
Sass:
#applyCSS {
.ui-bar-a {
color: blue;
}
.ui-bar-a .ui-link-inherit {
color: orange;
}
background: #CCC;
}
Generated CSS:
#applyCSS {
background: #CCC;
}
#applyCSS .ui-bar-a {
color: blue;
}
#applyCSS .ui-bar-a .ui-link-inherit {
color: orange;
}
Write all class/id CSS as below. #applyCSS ID will be parent of all CSS code.
For example you add class .ui-bar-a in CSS for applying to your div:
#applyCSS .ui-bar-a { font-size:11px; } /* This will be your CSS part */
Below is your HTML part:
<div id="applyCSS">
<div class="ui-bar-a">testing</div>
</div>
Alternate solution. Include your external CSS in your HTML file by
<link rel="stylesheet" href="css/applyCSS.css"/>
inside the applyCSS.css:
#applyCSS {
/** Your Style**/
}
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>
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; }
I have a link called "Navigation" I want the link colour to change as I click on it and stay changed. For example: Default colour is blue. When I click on the link it goes to another tab and the color turns to green and it should remain green.
here is the code so far:
<style type="text/css">
a.specialAnchor
{
font-size: 1em;
text-align: right;
padding: 10px;
padding-right: 15px;
color: #0066FF;
}
a.specialAnchor:link
{
color: #0066FF;
}
a.specialAnchor:visited
{
color: Green;
}
a.specialAnchor:hover
{
color:Orange;
text-decoration:underline;
}
a.specialAnchor:active
{
color: Green;
text-decoration:underline;
}
<asp:LinkButton ID="Navigation" runat="server" BorderStyle="None" CssClass ="specialAnchor"
PostBackUrl="~/navigation.aspx">Navigation</asp:LinkButton>
This does not give me the results I want Please help.
Basically my webpage looks a something like this:
there are four tabs: A, Navigation, C, D
And in all those four tabs there are links at the bottom of the page.
When you are on A and you click on Navigation link, it will take you to Navigation page. What I want is to change the colour of the link when it is clicked on or visited.
Thank you
Have you tried changing the color of the visited pseudo class to green? Try that and see if works the way you want?
Ok, given that you have a link like this
<a class="spec" href="wherever">Link</a>
You need styles like this
<style type="text/css">
.spec:link {color:#FF0000;} /* unvisited link */
.spec:visited {color:#00FF00;} /* visited link */
.spec:hover {color:#FF00FF;} /* mouse over link */
.spec:active {color:#0000FF;} /* selected link */
</style>
Done on the tryit editor at w3schools :)
If changing your :visited pseudoclass doesn't give you what you want, try changing the style onclick with jQuery:
$('a.specialAnchor').click(function() {
this.style.color = 'green';
}
Try something like this
$(document).ready(function () {
$('.changecolor').click(function () {
$(this).css("color", "red");
});
});
<a class="changecolor">Click To Change</a>
If you need to change the color back to what it was, you can use .toggle()