Aug 01
Regular CSS for FF, IE7, Opera, Safari:
#subnav li {background-color: green;}
#subnav li:first-child {background-color: red;}
CSS for IE 6 (using conditional comments):
<!–-[if IE 6]>
#subnav li {background-color: expression(this.previousSibling==null?'red':'green');}
<![endif]-->
Similar to :last-child
Instead of this.previousSibling==null there should be this.nextSibling==null
August 1st, 2007 at 9:58 pm
Осталась мелочь — заставить работать :last-child ну хоть, блин, где-нибудь
http://www.css3.info/selectors-test/
August 1st, 2007 at 11:20 pm
В FF 2.0.0.6 работает
))
В ИЕ6 с этим хаком работает
В ИЕ7 с аналогичным экспрешном наверняка (проверять лень, но с чего бы не?)
September 4th, 2007 at 9:30 am
Да всё тут понятно… (и спасибо, кстати)
Правда каждый раз когда IE6 тупит применять expression…
Это не скажется на скорости загрузки страницы..?
September 4th, 2007 at 9:43 am
Зависит от глубины прохождения по DOMу.
Если речь о конкретном примере, то чего там тупить. Тем более что оно и проходит и отрабатывает один раз, и кэшируется.
А вот если сделать аналог более глобальный, то ой. Я вот как раз все собираюсь сделать пост о direct/nested children ( > которые)…
November 13th, 2007 at 6:07 pm
Отец, отец!…
спасибо, очень кстати!
January 30th, 2008 at 10:44 pm
Using IE conditional expressions + expressions seems like a powerful way of fixing up many problems. Is there a reason why this is in general ignored (other than its reliance on JavaScript)?
January 30th, 2008 at 11:05 pm
There are 2 different things: cond. comments and expressions
Cond. comments is really very powerful way to fix up many problems of IEs crazyness. I guess main reason why people don’t use it – lazyness + hope to resolve things with no such “trick”.
Expressions, well – I guess it requires special knowledge (javascript + DOM)
)) well, very special… Plus understanding of accessibility, to have site working if JS will be turned off. People prefer to use ready-made JS scripts and libs than to write anything by hands.
August 7th, 2008 at 3:21 pm
A very nice little fix although I could only get nextSibling to work…
August 7th, 2008 at 3:30 pm
2Chaz: take a look to this post: How to implement :first-child and directly nested children for IE6
August 7th, 2008 at 4:38 pm
That’s a good example, but more than i needed. I played a bit more and I must have missed a semi-colon or something because it’s working for previousSibling now!
August 7th, 2008 at 4:45 pm
Ah perfect
Frankly last-child is almost useless thing as it is being not supported by almost any browser
)
At least for now.
But useful to set IE to his place…
December 5th, 2008 at 3:31 am
You, sir, are an evil genius, and I SALUTE YOU!
February 17th, 2009 at 11:40 am
Great! It saved lot of my time.
September 14th, 2009 at 1:49 pm
How can I use this with background image? I tried this, it doesn’t work :
div#myDiv ul li:first-child
{
background: url(../1stchild.jpg) repeat-x;
}
div#myDiv ul li
{
background: url(../otherchild.jpg) repeat-x;
}
IE6 :
div#myDiv ul li
{
background-image:expression(this.previousSibling==null?’url(../1stchild.jpg) repeat-x’:'url(../otherchild.jpg) repeat-x’);
}
Thanks!
September 14th, 2009 at 2:29 pm
Actually the code contains the error:
background-image: expression(this.previousSibling==null?’url(../1stchild.jpg) repeat-x’:'url(../otherchild.jpg) repeat-x’);If you define bg-image you shouldn’t add bg-repeat parameter there.
Try to fix this issue, ok?
Don’t hesitate to buzz me via my gtalk.
October 17th, 2009 at 7:54 pm
Hi Alex,
Thanks for the quick answer. I just googled ‘css last child IE6′ to see if it would work without having to load up my ‘virtua pc’ and check..
Good and straight to the point, shame you let the spammer ‘Programming Tutorials’ actually comment with that name on here though, didn’t think it was a place where I could spam out my free links. *bookmarked*
January 30th, 2010 at 11:03 am
hi!
This doesn’t work for me below is the code.
background:expression(this.nextSibling==null? none : url(../images/menu_separator.gif) no-repeat right top);
January 30th, 2010 at 5:16 pm
@abdul: I suppose you forgot quotes there. Plus check the paths to image. Don’t hesitate to contact me via IM and show your page or model.
February 1st, 2010 at 12:47 pm
спасибо большое, как раз кстати решение пришлось!)
February 1st, 2010 at 1:29 pm
а для ie8 last-child как заделать?
знаю что не поддерживает его, а как?
February 1st, 2010 at 3:55 pm
Аналогично, через экспрешн
February 1st, 2010 at 4:12 pm
а не получается
в ie_style.css строка
#subnav li { background-color: expression(this.nextSibling==null?’red’:'blue’);}
что не так?
так тож не получается…
February 1st, 2010 at 4:12 pm
////
February 1st, 2010 at 4:13 pm
[if IE 8]><![endif]
February 1st, 2010 at 4:13 pm
блин не могу код вставить и показать((((
February 1st, 2010 at 4:20 pm
Так лучше в мессенджере.
Надо DOM смотреть, так по куску не скажу ничего.
February 2nd, 2010 at 11:49 am
Have an image background problem like “arisbalis”
Checkout my beta website @ cbo.in/qqcc
How do i get the last parallelepiped out from the footer
February 2nd, 2010 at 11:50 am
In IE obviously..
April 8th, 2010 at 3:45 am
i need to display a separate background image for the fiest child of a list items following is my code i have tried different combinations but does not work
.topmenu li {background-image: expression(this.previousSibling==null?url(‘absolute/path/to/topmenu_divider.jpg’):url(‘absolute/path/to/topmenu_divider1.jpg’));}
please advice
thanks
April 8th, 2010 at 9:10 am
There is lack of quotes, URL (as word) is not js variable. You should use additional quotes or (even better) move your current ones)
April 11th, 2010 at 5:39 am
hi alex can you provide the exact syntax
for the 1st list item i want the background to be positioned to left and for the remaining list items at top right
following is my code but does not work
1.
.topmenu li {
background: expression(true ? “url(‘website.com/topmenu_divider.jpg no-repeat top left’)”: “url(‘website.com/topmenu_divider.jpg no-repeat top right’)”);
}
2.
.topmenu li {
background: expression(true ? ‘url(“website.com/topmenu_divider.jpg no-repeat top left”)’: ‘url(“website.com/topmenu_divider.jpg no-repeat top right”)’);
}
April 11th, 2010 at 11:06 am
Try this one:
background: expression(true ? "url(http://website.com/topmenu_divider.jpg) no-repeat top left" : "url(http://website.com/topmenu_divider.jpg) no-repeat top right");
April 12th, 2010 at 2:37 pm
i have tried the following but the first-child is not working in ie6
Link
Link
Link
Link
Link
.topmenu ul li{background: expression(true ? “url(http://www.website.com/topmenu_divider.jpg) no-repeat top left” : “url(http://www.website.com/topmenu_divider.jpg) no-repeat top right”);}
April 12th, 2010 at 2:52 pm
There is no UL / LI, maybe you could share URL to your current model?
You can find my contacts in contact page if you’d prefer to not public the URL.
April 13th, 2010 at 4:40 pm
Could you kindly post the code for :last-child in IE.
this.nextSibling==null is not working for the example you have given.
April 13th, 2010 at 4:54 pm
To be honest I’d suggest to avoid using :last-child, it would be much more reliable to add a class there (using back-end or javascript). As not many browsers support last-child at all actually.
May 28th, 2010 at 3:17 pm
i need to display a separate background image for the fiest child of a list items following is my code i have tried different combinations but does not work
.topmenu li {background-image: expression(this.previousSibling==null?url(‘absolute/path/to/topmenu_divider.jpg’):url(‘absolute/path/to/topmenu_divider1.jpg’));}
please advice
thanks
May 29th, 2010 at 3:14 am
Steve, can I see your example at some URL? Try to catch me online using gTalk or Skype (username is mauzon)
June 9th, 2010 at 2:16 pm
#subnav li {background-color: gray; color:#fff; height:30px;}
#subnav li:first-child {background-color: blue; color:#fff; height:30px;}
#subnav li:last-child {background-color: red; color:#fff; height:30px;}
#subnav li {background-color: expression(this.previousSibling==null?’blue’:'gray’);}
#subnav li {background-color: expression(this.nextSibling==null?’red’:'gray’);}
this is my code am not able to use first child and last at a time it’s not working in ie 6.0
June 9th, 2010 at 2:35 pm
You should use expression logics within expression.
But I suggest you to use classes instead (at least for last-child)
June 9th, 2010 at 2:40 pm
when i try to use back ground image, it’s also not working in ie 6.0 this is my code
#subnav2 li { background-image:url(images/bg1.png); color:#fff; height:30px;}
#subnav2 li:first-child {background-image:url(images/bg2.png); color:#fff; height:30px;}
#subnav li {background-image: expression(this.previousSibling==null?’url(images/bg2.png)’:'url(images/bg1.png)’);}
June 9th, 2010 at 2:41 pm
when i try to use back ground image, it’s also not working in ie 6.0 this is my code
#subnav2 li { background-image:url(images/bg1.png); color:#fff; height:30px;}
#subnav2 li:first-child {background-image:url(images/bg2.png); color:#fff; height:30px;}
#subnav2 li {background-image: expression(this.previousSibling==null?’url(images/bg2.png)’:’url(images/bg1.png)’);}
June 24th, 2010 at 12:32 pm
div#test p:first-child {text-decoration: underline; color:red;}
div#test p:last-child {color: #0000ff;}
div#test p:{color:expression(this.previousSibling==null?’red’:'black’);}
div#test p:{color:expression(this.nextSibling==null?’#0000ff’:'black’);}
is not working
please advice me…
thanks & regards
amin
June 24th, 2010 at 7:49 pm
Remove [:] symbol after P before {