How do I target the first link inside a div with CSS?

Question

For example I have this:

<div>
  <a href="#">sample 1</a>
  <a href="#">sample 2</a>
  <a href="#">sample 3</a>
</div>

I want to target the first link with CSS.

sticksu · Accepted Answer · 2012-11-08T08:52:59.367

18

You can use the first-child selector:

div > a:first-child { /* your css */ }

edited Nov 08 '12 at 08:52

answered Nov 08 '12 at 08:47

sticksu

Alessandro Minoccheri · Answer 2 · 2012-11-08T08:55:15.380

10

Try this code:

div > a:first-child{
   //your css code
}

edited Nov 08 '12 at 08:55

answered Nov 08 '12 at 08:47

I have an unordered list in the div as well and this CSS is targeting the first link in the unordered list as well. Is there any way to target JUST the first link in the div and not the first link in every div within the div? – Danny Cooper Nov 08 '12 at 08:50
you have to set an id tou your divfor example or a class and after you frite something like this: #divid a:first-child{} in this case you select the first link of the div with the id 'divid' – Alessandro Minoccheri Nov 08 '12 at 08:51
I understand but it's still selecting every first link inside the div of 'divid' – Danny Cooper Nov 08 '12 at 08:53
1

@DannyCooper I edited my answer. Now it will only target the first a inside the div, not the one in the list. – sticksu Nov 08 '12 at 08:53
@DannyCooper understand, and edit my answer with what you want – Alessandro Minoccheri Nov 08 '12 at 08:55
1

@sticksu Bingo, I will award you the answer as soon as the site will let me. – Danny Cooper Nov 08 '12 at 08:55

score 3 · Answer 3 · answered Nov 08 '12 at 08:50

3

div a:nth-of-type(n)
{
   /* css */
}

where n is the number of line you want.. in your case

div a:nth-of-type(1)
{
   /* css */
}

answered Nov 08 '12 at 08:50

Nick Ginanto

`:first-child` is more concise and easier to read. It's also supported by more browsers. – Bojangles Nov 08 '12 at 08:51
what if someone wants the 2nd/3rd/4th... row? – Nick Ginanto Nov 08 '12 at 08:52
nth isn't supported by some browser – Alessandro Minoccheri Nov 08 '12 at 08:52
2

http://www.w3schools.com/cssref/sel_nth-of-type.asp support all major excep ie8 and earlier – Nick Ginanto Nov 08 '12 at 08:53

3 Answers3