Like attribute selectors in CSS, is it possible to apply style on text which is in bold inside a DIV. For example I can select a DIV using CSS attribute selector like below
div[attr = value]{
...
}
Is there any way to select Bold text like above selector? If JavaScript there are several ways to make that work but I am just looking for possibility of CSS solution. And my target is only Chrome
No. CSS doesn't provide any selectors that operate based on the style of an element.
this should be quite easy.
div b{font-weight:normal;}
this will select every <b> tag contained within every <div> tag, and set the font weight to normal.
If you wanted to be specific, use the div class or id.
#someDivId b{font-weight:normal;}
If your bold text is not defined with <b> tags, but you know what tags are used, such as span, then you might try,
span[style*="font-weight"]{font-weight:normal !important;}
http://jsfiddle.net/G8NaB/
Hope this helps...
According to http://www.w3.org/TR/css3-selectors/#attribute-selectors
[att*=val] Represents an element with the att attribute whose value
contains at least one instance of the substring "val". If "val" is the
empty string then the selector does not represent anything.
So you may try:
div[style*=bold]{
...
}
This will work if you apply inline styles.
You can try this fiddle.
HTML
<div data-role="page">Bold text</div>
CSS
div[data-role~="page"]{font-weight:bold;}
Hope this helps.
Related
I have a few different types of tags that have the onClick parameter. Is there any way I could apply CSS only to the tags that have this onClick parameter?
You can use the attribute selector:
div[onClick] {
color: #F00;
}
<div onClick="alert('123')">One</div>
<div>Two</div>
<div onClick="console.log('123')">Three</div>
<div>Four</div>
This pretty much does what it says on the tin, it will match an element with the given attribute.
You could make this narrower if you want to match a specific function using something like [onClick^=functionName] (This example will select anything that starts with "functionName", including "functionName2"), but leaving it as [onClick] will match any element with an onClick attribute, regardless of the attributes content.
In following code, hasClass doesn't work and result is false in alert. why, what do i do?
Online Demo: http://jsfiddle.net/Fe3CK/
HTML:
<span>
<div class="adding"></div>
</span>
JS:
alert($('span').hasClass('adding'));
I think you might be misunderstanding what .hasClass does. It checks whether the element itself has one of these classes assigned. From the documentation:
Determine whether any of the matched elements are assigned the given class.
If you want to check whether the element contains an element with that class, use .has:
Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
alert($('span').has('.adding').length > 0);
You need:
alert($('span div').hasClass('adding'));
since your span does not have any class adding. Only the child div of your span has it.
Updated Fiddle
Note: Only inline elements may be contained within inline elements. span is an inline element so block level elements like div or p cannot appear within a span.
Hence, <div> inside <span> tag is not a valid HTML5 markup so you should use <div> instead of <span> in this case.
You have to select div not span , as div has class of 'adding'
alert($('div').hasClass('adding'));
Demo
If you want to check any children of span has class, then you can try like this;
alert($('span').children().hasClass('adding'));
div inside a span is not a good practice and your span not have any class adding , adding is its child object's class so please use like
alert($('span').children().hasClass('adding'));
I need to be able to change the innerHTML of a class, based on the innerHTML of that class, however, the text of that class is different from regular text (has it's own css and what not), and it needs to retain such properties, so I can't use text() I have
<span class="special">John</span>
And I need to change all classes with the special attribute, and innerHTML of John, to Jack.
however, for whatever reason
$("[special='John']").html('<span class="special">Jack</span>');
is not working. I'm sure it's just a silly mistake, but thank you in advance.
Like this?
$(".special:contains('John')").html('Jack');
Or, if the text needs to be equal to, rather than contains:
$('.special').filter(function() {return $(this).text() == "John";}).html('Jack');
I have this element in my HTML page:
<a style="display:block;width:728px;height:90px;margin:0 auto;background:#EEE url('/_images/2011images/img_dotco_3.jpg') no-repeat top left; text-decoration:none;color:#000;" href="/domain-registration/dotco-overview.aspx?sourceid=bnrq2co728x90">
<span style="float:right;margin:5px 27px 0 0;width:110px;color:#FFF;text-align:center">
<span style="display:block;font-size:1em;text-align:center">NOW ONLY</span>
<strong style="display:block;font-size:1.6em;text-align:center"><!-- START TAG // Co_RegisterPrice_TLD -->
<span class="Tag_Co_RegisterPrice_TLD"><strong>$35.70</strong>/yr</span>
<!-- End TAG // Co_RegisterPrice_TLD --></strong>
</span>
</a>
I need to hide it with CSS or Javascript. CSS would be the best scenario but Javascript is OK as well.
The fact is that I cannot edit the HTML code at all, so I have no way to delete this item directly. Also this is not parent of any other HTML element, so I do not find an easy way to hide it with CSS.
Also I need to hide this A element even if the background image changes or the link changes, in fact it's not always the same.
I reported all the available HTML.
Here is an example http://subdir.co/help-center/default.aspx
It's the top banner there.
Let me know how to hide it from the page. Thanks.
Try with jQuery:
$('a[href^="/domain-registration/dotco-overview.aspx?sourceid"]').hide();
This hides the a tag with a href attribute starting with /domain-registration/dotco-overview.aspx?sourceid.
Use:
document.getElementById('yourElementId').display=none;
You can traverse the dom tree from the class "Tag_Co_RegisterPrice_TLD" to find the A tag which you can then hide.
If you need to do additional logic then you can access the text (e.g. price/title/url) before deciding to hide.
Use jQuery if raw javascript is to much for you.
Since you cannot change the HTML code, you can't add an identifier to the element in order to select and manipulate it.
But you can use jQuery to select the first 'a' element, and set the 'display' property to 'none'.
I think something like this should do:
$('a:first').css("display","none");
You could try it with css:
a[style][href] {
display: none !important;
}
i think adding class or making some rule for css selector woudn't work, because definition in attribute of the elements overrides another style definition.
It will be easy if you use some javascript library for dom manipulating for example jQuery.
after that you can write something like
$(".sCntSub3 > a").hide()
you can try finding element from browser console. It is easy way how to verify you choose right element
jsFiddle Classname Method DEMO
jQuery via Classname: In this method we "look inside" the anchor for clues.
$(document).ready(function () {
// To disable the line below, just comment it out just like this line is.
$('.Tag_Co_RegisterPrice_TLD').closest('a').hide();
});
jsFiddle ID Method DEMO
jQuery via ID: This time, we don't look inside since anything can change. We now use a div reference!
$(document).ready(function () {
// To disable the line below, just comment it out just like this line is.
// No matter the unique ID code in front of MasterUpdatePanel Div, it will always be matched.
$('[id$="MasterUpdatePanel"]').next('a').hide();
});
Shown here is a Firefox Screenshot of the HTML Page. Notice the Div ID contains ctl00_MasterUpdatePanel. The letters, numbers, and underscore in front of that may change, but not this keyword. Therefore, a match of the "ending part" of the id works!
I am looking for a javascript that can help me to change the color of a text inside the textarea tag. For example, to have a variable in the javascript:
var a = '<div class="carleft"><p class="coto1">';
now, the javascript should make the text that is inside the variable, to be displayed as bold with red color in the textarea.
See this previous question/answer: jQuery wrap selected text in a textarea
Inner HTML of the textarea element you cannot change the styles/colors of the partial words or characters.
You should use or some other element to implement this.
You can consider the
contenteditable="true" attribute for this purpose.
By using this attribute you can dynamically edit any html element. Which was styled before.
A textarea does not support different styles or colors in the text. You can use contenteditable="true", but that will probably give the user more freedom than you want. I think a better option would be to use a library like CodeMirror or MDK-Editor.