html - Can I combine direct descendant with first-child pseudo-selector? -
i've got container div contain number of children. want target links direct descendants of container div, , can .container > a
. then, want give different styling first link direct descendent of container. assumed .container > a:first-child
perform task, seem not.
note using .container a:first-child
target first 2 "incorrect" links, can't use that, don't think.
obviously can rework structure of html, i'd see if there's css solution here.
<!doctype html> <html lang="en"> <head> <style> .container > { background-color: plum; } .container > a:first-child { background-color: pink; } </style> </head> <body> <div class="container"> <div><a href="#">incorrect link</a></div> <div><div><a href="#">incorrect link 2</a></div></div> <p>some text</p> <a href="#">category 1</a> <a href="#">category 2</a> <a href="#">category 3</a> </div> </body> </html>
you can use .container > a:first-of-type
jsfiddle : http://jsfiddle.net/cp7jz/
Comments
Post a Comment