css - New CSS3 selectors doesn't work for me? -
ok, have code this:
<div id="header"> (yeah, have use div instead of header tag, don't ask me why) <a href="link"><img src="image1.png" alt="image1" /></a> <a href="link"><img src="image2.png" alt="image2" /></a> <a href="link"><img src="image3.png" alt="image3" /></a> </div>
and want select first image after div (first link image) , 2 last links in css.
i know nth-child or first/last child selectors. want use "+" , "~". doesn't seem work!
for example:
#header + { border: solid 1px red; }
gives border to... nothing!
this 1 doesn't seem work:
#header + img { border: solid 1px red; }
what's wrong?
same effect "~". tested in major browsers....
you've got wrong. selector you're looking
#header > a:first-child
this select first anchor direct decedent of #header
. >
direct decedent selector, while :first-child
gets the... well, first child. image, need
#header > a:first-child > img
the direct decendent selector not supported in ie6. can choose not use if there no non-direct decedents not want select, structure have above, doesn't have other anchors other ones want select.
the +
adjacent sibling selector: http://meyerweb.com/eric/articles/webrev/200007a.html. following html structure need selector work:
<div id="header"></div> <a href="#"><img src="somewhere" alt="" /></a> <-- selects 1 #header + <a href="#"><img src="somewhere" alt="" /></a> <a href="#"><img src="somewhere" alt="" /></a>
Comments
Post a Comment