<td colspan="4" valign="top">
<label for="state_1" id="state_1">
Text:
</label>
another text
</td>
Can i add css to "another text" without a html tag o id/class on td class?
Short answer: not easily.
Longer answer: yes, but if you don't want the style to also apply to the <label>, you'll need to also negate those style changes.
While it would definitely be easier to just wrap the text in a <span> and target it with td span as the CSS selector, you could apply CSS to td, and then "undo" those changes to td label:
td {
color: red;
}
td label {
color: black;
}
You have to first target the td you want. Since you don't want to add an id or class to it, you'll have to use general selectors, i.e td or table tr td. In order to only affect the text and not the label, you'll have to "undo" the styles you add to the td text:
td {
color: red;
}
td label {
color: black;
}
If you have other tags inside the td in addition to the label, you'll have to exclude those as well.
Well, yes you can target "td" in your css, but it will affect as well since css works in cascade, so you'll have to write extra css to overwrite it. Like so :
td{
color: red;
}
td label{
color: black;
}
Related
I have an interactive page that changes td background color dynamically, with javascript. Without any style, this page works fine. As a style requirement, table background color should be black, and td background should be white. But due to cascade rules, dynamic changes have lower priority, so javascript is not able to override static style. How can I solve this? Thanks.
Sample 1:
cell.style.cssText = "background-color: gray;" // it works fine
Sample 2:
table {
background-color:black;
}
td {
background-color: white;
}
cell.style.cssText = "background-color: gray;" // it does not work anymore, even with "!important;"
Inline styles override styles defined in <style> and it works even with dynamic styling using cssText (see my code example). Your problem is probably somewhere else, e.g. in the cssText value itself (it should be background-color: gray;, not just gray
function foo() {
document.getElementById("cell3").style.cssText = "background-color: green";
}
table {
background-color:black;
}
td {
background-color: red;
}
<table>
<tr>
<td>cell1</td>
<td>cell2</td>
<td id="cell3" onclick="foo()">cell3</td>
</tr>
</table>
To simplify, I have a label set in my html as:
<label id ="lblApptDateTime" >Appointment</label>
On an event I am changing the lext of lblApptDateTime to Appointment with an asterisk. I want the asterisk to be red color and in bold font. How do i achieve that ?
Here's what I am changing the text on the event:
$("#lblApptDateTime").html("Appointment" + "*");
Need to change the color of asterisk to red and in bold font.
You can add the asterisk in an :after pseudo-element. This way you can style it to your liking, apart from the text.
.asterisk:after {
content: '*';
color: red;
}
In your JavaScript, instead of adding the asterisk inside the label, you just add the class asterisk to it:
$("#lblApptDateTime").html("Appointment").addClass("asterisk");
You can also use toggleClass() instead of addClass() if the asterisk should be toggle-able.
Here's a working fiddle. Since I didn't have any other event available, I used hover.
Wrap it in a span and use a class
$("#lblApptDateTime").html('Appointment' + '<span class="red">*</span>');
.red {
color: red;
font-weight: bold
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<label id="lblApptDateTime">Appointment</label>
HTML:
$("#lblApptDateTime").html("Appointment" + "<span class="red">*</span>");
CSS:
span.red {
color: red;
font-weight: bold;
}
You'll need to put it in a new styled element like a span, which you can do with append:
$("#lblApptDateTime").append($("<span>").css("color", "red").text("*"));
Or addClass() instead of using css() and style it appropriately.
I'm wondering if it's possible to change just a section of the a text input box's color. I am creating a comment widget want everything between the # and the : to change to a different color:
<input type="text" placeholder="Want To Say Something?"
value="#user556: This is a test comment" ng-model="Comment" ng-click="getCurrentPosition()"
class="form-control ng-valid valid ng-dirty">
Is this possible to do with jQuery or javascript? Or do I have to convert the text input to a div?
Possible, within a contenteditable element,
and with some JS and a bit of RegExp to replace the desired match:
function colorify() {
this.innerHTML = this.textContent.replace(/#([^:]+):/g, "#<span class='user'>$1</span>:");
}
function uncolorify() {
this.innerHTML = this.textContent;
}
[].forEach.call(document.querySelectorAll(".comment"), function(el){
el.addEventListener("blur", colorify);
el.addEventListener("focus", uncolorify);
});
[contenteditable] {
background:#fafafa;
padding:8px;
border-radius:3px;
border:1px solid #ddd;
}
[contentEditable]:empty:not(:focus):before {
/*http://stackoverflow.com/a/18368720/383904*/
content: attr(data-placeholder);
color: #777;
}
.user{
color: #f0f;
}
(Copy the following text into the contenteditable)<br>
#user547794: Use contenteditable. #johnDoe: nice suggestion btw.
<div class="comment" contenteditable data-placeholder="Want To Say Something?"></div>
Than click outside of the contenteditable.
I want to replace all #111 color (example color) with #222 (new color) in html file using jQuery. I want to do this to change the theme of website by single click.
Initial css:
body{
bg-color:#111;
color:#111;
}
div1{
bg-color:#111;
color:#111;
}
.
.
.
divn{
bg-color:#111;
color:#111;
}
After click event:
body{
bg-color:#222;
color:#222;
}
div1{
bg-color:#222;
color:#222;
}
.
.
.
divn{
bg-color:#222;
color:#222;
}
The best solution here is to define 2 css classes with cascaded styles to nested elements.
body { color:#111 }
.theme1 { color: #222; }
.theme2 { color: #333; }
.theme2 a { color: #003366; }
...
Then you can change the css class of your body element and all elements on the page will inherit new styles.
// theme1 color
<body class="theme1">
...
</body>
// theme2 color
<body class="theme2">
...
</body>
jquery code:
$('body').addClass('theme1');
The best way to change theme with one click is give some class to your body tag.
Then in your css:
body{ color: #111;}
body.secondTheme{color : #222; }
And you can bind change it for click event in jquery
$("#yourButton").click(function() {
$("body").toggleClass("secondTheme");
});
the proper way to do this would be to assign a css class to every html element you want to change color.
HTML:
<div class="colorChange">
CSS:
.colorChange{ color:#111;}
Then you would have a button that triggers a javascript function, which would change the color attribute of the colorChange class, I would recommend using jQuery:
$(".colorChange").css('color', '#222');
If you can toggle between classes I think it will be better; if you can't/don't want you can use the .filter function in jQuery:
$('yourselector').filter(function(){
return $(this).css('color')=='rgb(0, 1, 17)';
}).css('color','rgb(0, 2, 34)');
This will change all elements selected by yourselector with color rgb(0, 1, 17) to color rgb(0, 2, 34).
Obviously you can also do the same with other css attributes.
<table id="tab">
<tr><td>dsf</td><td>dsf</td></tr>
<tr><td>dsf</td><td>dsf</td></tr>
<tr><td>dsf</td><td>
<table id="tab2">
<tr><td>dsf</td><td>dsf</td></tr>
<tr><td>dsf</td><td>dsf</td></tr>
</table>
</td></tr>
</table>
#tab td {
border: solid 1px red;
}
#tab2 {
background-color: green
}
$("#tab").find("tr").css("background-color", "red");
This function find all TR in #tab. i would like find only first TR, not nested TR.
Is possible without add class for TR? i would like make this only with jQuery.
find finds all descendant elements.
It sounds like you want .children('tr').
You can also do $('#tab > tr')
$("#tab>tr").css("background-color", "red");
that would do what I think you are trying to do XD
Otherwise you could try
$("#tab").find("tr:first-child").css("background-color", "red");
question was unclear :P