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]-->

:first-child and nested children (for IE6) working example

 

31 Responses to How to implement :first-child and directly nested children for IE6

  1. Jurij Burkanov says:

    Hey, thanks a lot! Exactly what I needed!

  2. WillliamKidd says:

    А такую штуку никак нельзя сделать:
    li:first-child ul{
    foo: bar;
    }
    ?

  3. Alex says:

    Почему нельзя? FF скушает и так, а для IE надо написать навороченный expression
    li ul {foo: expression((this.parentNode.tagName==’LI’ && this.parentNode.previousSibling == null)?’bar’:’bistro’);
    Не проверял, но суть-то такова.
    Работать правда будет только для непосредственно вложенных UL в LI – но опять же можно поколдовать :))

  4. WillliamKidd says:

    Фантастик!) Спасибо!

  5. Alex says:

    Да не за что.

  6. Vince says:

    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.

  7. Soul says:

    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.

  8. Alex says:

    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 ;))

  9. Alex says:

    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.

  10. Soul says:

    Alex, let me see if I can trim down an example exhibiting the problem, and post it here.

    _thank you_
    Soul.

  11. Soul says:

    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

  12. Alex says:

    you can reach me at mauzon (at) gmal.com and the same account at gTalk.

  13. css design says:

    css layer examples / properties and layer attributes
    http://css-lessons.ucoz.com/css-layer-properties.htm

  14. sue says:

    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

  15. ZorkFox says:

    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?

  16. Alex says:

    2ZorkFox: just add the code into head section, nothing more. Feel free to contact me directly using IM 😉

  17. Hem says:

    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.

  18. Alex says:

    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.

  19. Pirauá says:

    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’);
    }

  20. Alex says:

    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)’);
    }

  21. mediadot says:

    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?

  22. Luke says:

    Okay if you want to change the colour i guess, i found it to be usless if you want to change padding or width.

  23. Yannick says:

    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

  24. Alex says:

    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

  25. igi79 says:

    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));
    }

  26. Kevin says:

    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/

  27. Tina says:

    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! 🙂

  28. Alex says:

    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’?

  29. Tina says:

    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 🙂