I'm trying to determine the style of a div by going by what is in it. If the content is '0', it should have color: red, and if not, fall back to the usual color.
I've found there used to be :contains(value), but that doesn't exist anymore. Is there any replacement I can use for this in css?
Thanks in advance.
No, there isn't. If CSS was going to have a content selector, it would have kept :contains().
For what it's worth, jQuery implements :contains(), so if you're using it already you can apply styles with it instead.
Related
Is there a way of adding CSS rules to an element only if it has an certain child element ? I do know it is not possible to do it with CSS, but I'm not sure if it is possible to do it with LESS.
If it is not possible with CSS, then it is not possible with LESS, which compiles to plain old vanilla CSS.
The problem is, that the LESS is compiled without knowledge of the HTML it is applied to, and without any client side scripting. Therefore, it is impossible to achieve anything with LESS that can not be achieved by using CSS alone.
You could achieve what you want by using client side javascript, or you could wait until CSS4 comes out, and use the parent selectors to the same effect as what you want.
This isn't possible in CSS or LESS.
I would suggest your best bet is jQuery.
If your parent element is .parent and your child is .child, you could do:
$('.parent:has(.child)').addClass('myClass');
See Example: http://jsfiddle.net/d8Lz5/
in 2022 you don't need JS or jQuery to add styles, as is clearly visible from Curtis' earlier answer. to conditionally add the desired CSS (declarations, not rules!) to the parent the CSS file would contain rule like this for example:
.parent:has(li){
/* your CSS declarations to apply */
font-family: my-font;
}
pseudocode: "if .parent has a list-item make parent use my-font"
There's a pile of questions with related sounding titles, but I didn't see my answer for this question in case anyone is checking (feel free to leave a reference though!).
This is more out of inexperience than anything... but if I have a global stylesheet that sets the CSS properties of a class div.rowpic, and then I do this:
<div class="rowpic" style="background-image: url('whatever.jpg');"> ... </div>
Can I reliably expect browsers to use the full CSS specification of div.rowpic but replace its background image with the style I explicitly stated in this div tag?
Yes, that's what should happen.
Style in the element overrides the definition of the style in the declared CSS('s).
Each property of the styling is applied independently from the others, so even if you import another CSS after that one that has the same class but only redefines some of the selectors, you still get the remaining ones applied from the first CSS.
Of course. In this case, the background image will be replaced since inline styling rule is more important of css styling rules.
Please read this article about CSS specificity: http://css-tricks.com/855-specifics-on-css-specificity/
We are dealing with browser compatability issue for IE8. Borders for text box does not appear to be in blue. We are using attribute selector
input[type="text"]
{
border: solid 1px #7F9DB9;
}
Which is applied only to IE8 And not IE6.
However the problem is some text box already has border defined in it. Which are being overwritten. I tried using expression but it seems to work only when DocType is not present.
The other option left for us is to make each of the textbox classes in css for border with !important, Which is very tedious indeed for the big project.
Second solution is to use jquery which mgmt is aganist.
Can any one guide as how to target this.
Are you sure you've defined property at the appropriate level, and not again somewhere that would override it?
IE6 does not support attribute selectors, you will have to target it another way. I would suggest adding a CSS class -- the default styles are going to be different in every browser.
You could also try being more specific, as littlefoot mentioned. Try adding more of the cascade to reference that element and you might be able to override it. Avoid using !important wherever possible.
I'd like to show a title with the first three characters in different color.
I know this can be done with <h2><span>The</span> awsome title</h2> but I was wondering if there is some kind of "nth-child" property that can be applied to characters inside an element.
I'd like to avoid breaking the text by inserting other elements ( etc.)
A (relatively) crossbrowser solution would be welcome.
There is no cleaner way than what you already have.
<h2><span>The</span> awesome title</h2>
With CSS:
h2 {
color: red
}
h2 span {
color: blue
}
There's :first-letter and :first-line, but no :first-word.
I imagine the reason for this is that it's hard to define exactly what a "word" should be.
The only way to do it without changing your markup is to use JavaScript to enclose the first word with a <span> (and style it the same way), but I would only recommend that if the rest of your site already heavily relies on JavaScript to function.
Yep, JavaScript is the only way I can think of (as everyone else has already said!). Demo here.
$(function() {
$('h2').each(function(){
$(this).html( $(this).text().replace(/(^\w{3})/,'<span>$1</span>'));
});
});
This isn't possible with the current CSS operators you are talking about nth-whatever,
This could however be done with JavaScript... if of course you want to go down that route, the best way to do it would be with <span> tags as then you will have no problems with people who have disabled JS.
It is entirely up to you, but if I were in your position I would just man up and use JS, it is called progressive enhancement and unobtrusive JS, as long as the content is not wrecked if the user disables JS it is acceptable, see here:
http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/
Sadly, there isn't a way to do this with stylesheets. CSS3 provides us with first-letter and first-line, but not first-word, and certainly not first-n-letters.
See also the answers to this question for more: CSS to increase size of first word
JQuery does implement a first-word selector, so if you're prepared to go with the Javascript option, you may be able to do it.
Heh. It seems that JQuery doesn't actually implement it after all. I must have been using a plugin when I saw it.
But here's a link to a Javascript solution that might help: http://www.dynamicsitesolutions.com/javascript/first-word-selector/
I'm able to force browsers to use inline css ex:style="...." by using styleWithCSS execcommand. That however doesn't work for IE. IE still uses HTML tags rather then inline css. Is there a way to force IE to use inline styling.
Not by using execCommand(), no. You'll need to style the selection contents manually to have that kind of control. My Rangy library's CSS class applier module may be able to help point you in the right direction.