Correct CSS:
#someid div {color: blue;}
#someid div:first-child {color: red;}
#someid > div {color: green;}
#someid div div {padding-left: 2em;}
/*
just to show some indend and separate direct children to nested ones
*/
IE6 CSS:
<!--[if IE 6]>
<style type="text/css">
/*
FIRST CHILD AND NESTED CHILDRED:
1st one for :first-child
2nd one for all other directly nested childred
*/
#someid div {
color: expression(this.previousSibling == null ? 'red' : (this.parentNode.id == 'someid') ? 'green' : '-' )
}
</style>
<![endif]-->
If you enjoyed this article, please consider sharing it!
Hey, thanks a lot! Exactly what I needed!
А такую штуку никак нельзя сделать:
li:first-child ul{
foo: bar;
}
?
Почему нельзя? FF скушает и так, а для IE надо написать навороченный expression
li ul {foo: expression((this.parentNode.tagName==’LI’ && this.parentNode.previousSibling == null)?’bar’:’bistro’);
Не проверял, но суть-то такова.
Работать правда будет только для непосредственно вложенных UL в LI – но опять же можно поколдовать :))
Фантастик!) Спасибо!
Да не за что.
this doesn’t seem to work for me. i’m obviously doing something wrong but i don’t know what.
table.mainNav table a {
_background-color:expression(this.previousSibling==null?’red’:’-‘)
}
i want the first link within table.mainNav table to be red and the rest not to be affected.
any help would be greatly appreciated.
Okay, this is really cool– but what if, I want inheritance to stop? For example, if I I create a and then someone else automatically generates 3 more tags without class name or id or anything like that beneath. If I attach a background image to the innermost (for example: div.myclass div div div {background : url(…) } everything works okay. But if the other party generates a 4th underneath me, the background image I created propogrates to that 4th and I can’t stop it from doing that in IE6.
In firefox it’s simple by saying div.myclass>div>div>div {} all the way up the layers of divs to div.myclass{}. But it doesn’t work right in IE6.
2Vince: well I’d like to see exact code to be helpful, could you add me as GTalk contact (mauzon) – I think we can resolve the issue 😉 It is hard to help without knowing exact code.
At least be careful to syntax because it is javascript ;))
2Soul – I am pretty sure it is possible to find some elegant solution to stop the inheritance for IE6 using expression. Actually I am lazy guy to create abstract models for ANY occasions but definitely ready to discuss concrete page problem or/and even model. So don’t hesitate to create and share the problem and we’ll try to find the solution.
Alex, let me see if I can trim down an example exhibiting the problem, and post it here.
_thank you_
Soul.
Um, actually I can’t put everything here, can you provide me with a private email address, so I can send you the example?
thx
Soul
you can reach me at mauzon (at) gmal.com and the same account at gTalk.
css layer examples / properties and layer attributes
http://css-lessons.ucoz.com/css-layer-properties.htm
Hi,
a colleague just turned me on to this work-around, and it’s worked wonders for the first task at hand, thanks!
Now i have a problem implementing this in another situation, and wondered if anyone could help?
i’m trying to target the first div (class ‘fight’) to lose the top margin assigned to every column…
.col-container .fight .column { margin-top: expression(this.previousSibling == null ? ‘0em’ : (this.parentNode.className == ‘fight’) ? ‘1.31em’ : ‘-‘ );
}
…can anyone see what i’m doing wrong? (i’m limited in Javascript)
The freaky thing is that if i target an element within .column (like ), it plays ball. the mind boggles. Help would be much appreciated! (i don’t speak russian tho..;o)
Many thanks
I’m sure I’m missing some kind of n00b thing here, but I can’t just plug that IE6 conditional comment block into my header and have it work, can I? 🙁
How should I make the call to this code?
2ZorkFox: just add the code into head section, nothing more. Feel free to contact me directly using IM 😉
Hi
Your example is working fine for me. But I need to place background image instead of color. Can you please give an example.
Thanks in advance.
4Hem: The same behavior – just to change expression a bit. Don’t hesitate contact me to check your problem – I am sure we’ll find the solution.
Hi
I’m trying to use the following code:
#menu li ul li{
background: expression(this.previousSibling==null?’none’:’url(img/ponto_menu.gif)’);
}
But it doesn’t work. What’s wrong?
It only works when I use just color names like this:
#menu li ul li{
background: expression(this.previousSibling==null?’red’:’green’);
}
I suppose if you want to work to background-image you should write something like that:
#menu li ul li{
background-image: expression(this.previousSibling==null?’none’:’url(img/ponto_menu.gif)’);
}
Nah, not working for me (
Any ideas?
Gimme the URL please. I guess there are some img paths issues,
Okay if you want to change the colour i guess, i found it to be usless if you want to change padding or width.
Why? It can be done for padding and width as well with no problem.
can you chain selectors like this?
#wrap ul li { border-bottom-color: expression(this.parentNode.previousSibling==null?’red’:’black);}
i have 2 ul one after the other and can’t modufy the code.
I just want to change all li borders from the first ul but of course ul:firstchild doesn’t work in ie6
I thought i read somewhere a way to emulate it but can’t find it anymore
Cheers
Hey Yannick, could you please provide URL to your model and buzz me online somehow? I think it is possible to resolve the problem, just need a bit more info. Your quote contains tiny syntax error – lack of last ‘ – it could be another reason.
Best,
Alex
espression:
expression(this.previousSibling==null?’none’:’url(img/ponto_menu.gif)’);
is not working due to bracket in url(img/ponto_menu.gif – see http://www.webmasterworld.com/css/3592524.htm
this is working in IE6 (dont ask me why):
#elementid{
background-image: url(topmenu_li.png);
background-image: expression((function(x){if(x == null)return ‘none’})(this.previousSibling));
}
I just made a blog post that discusses all of the different options for emulating CSS child selectors in IE6: http://craftycode.wordpress.com/2010/05/19/emulating-css-child-selectors-in-ie6/
Why does it not work if I use:
#myId tr td {
border-top: expression(if(this.previousSibling == null) ‘0’);
border-bottom: expression(if(this.previousSibling == null) ‘0’);
}
I assume the single expressions are correct, because they work when just one of them is used.
Thank you! 🙂
Tina, perhaps if you be better idea then to collect it into just 1 expression using border-width rule and define it as ‘0 Xpx 0 Ypx’?
I don’t think I can do it using just one css attribute. I need to replace the use following pseudo classes.
#myId tr:first-child td {
border-top: 0;
}
#myId tr:last-child td {
border-bottom-color: blue;
}
#myId tr td:first-child {
border-left: 0;
}
#myId tr td:last-child {
border-right-color: blue;
}
Thank you 🙂