how do u target an individual Li element

[andreea115]

hi everyone

simple question really but it has always confused me;

how do i target an individual li element in a list.

i mean, i have a list consisting of 6 list items with a height of 60px. but i want one of the li eliments to just have a height of 30px.

thanks everyone

warm regards

andreea

eg.

[chrisburton]

Depends which one but you can use `first-child`, `last-child` or `nth-child`. That or give it a specific class name.

[Paulie_D]

It should be pointed out that the last option (individual class) has the best browser support.

[chrisburton]

@mintertweed You’re targeting the anchor tag not list-item for the height.

[andreea115]

hi everyone
thanks for your quick replies

here is my code pen:
http://codepen.io/anon/pen/kCmBK

i am trying to target the navs03 and make it to be 30px height. u will note that its the only li element that does not have a link in it.

You will note that i have given both the Li and the a tag a set height. i have done this because i wanted to place a background image for a navigation bar behind it.

i am therefore not clear how to target it.

warm regards

[Anonymous]

give the li you want to target an id.

[chrisburton]

Alternative you could do something like this

#theglobe li, #theglobe a {
display: block;
background: red;
}

#theglobe li {
float: left;
list-style: none;
display: inline;

color:#FFF;
margin: 10px;
}

#navs01, #navs02 {
height: 56px;
}

#navs03 {
height: 30px;
}

[andreea115]

ah.

how silly of me. thanks very much everyone; simple solution to a simple problem. Great!!!

much appreciate everyone chipping in.

warm regards

andreea

[Author]

Posts