Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 817
Danny Cooper Avatar asked Nov 08 '12 08:11

Danny Cooper


People also ask

How do I target a link tag in CSS?

URLs with an # followed by an anchor name link to a certain element within a document. The element being linked to is the target element. The :target selector can be used to style the current active target element.

How do you target the first element in CSS?

The :first-child selector allows you to target the first element immediately inside another element. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.

How do I select the first div inside a div?

Or you can select by ID: #elementID. div[id="elementID"]

How do you select the first span in CSS?

The CSS selector div:first-of-type only selects the very first element of its type and styles it. The div span:first-of-type selects the first span in each div since the div is the parent element.


3 Answers

You can use the first-child selector:

div > a:first-child { /* your css */ }
like image 141
sticksu Avatar answered Nov 17 '22 19:11

sticksu


Try this code:

div > a:first-child{
   //your css code
}
like image 39
Alessandro Minoccheri Avatar answered Nov 17 '22 18:11

Alessandro Minoccheri


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 */
} 
like image 26
Nick Ginanto Avatar answered Nov 17 '22 18:11

Nick Ginanto