Forums

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.

mintertweed

I suggest to make a CodePen with your HTML of the list with a comment beside the li element you want to make 30 pixels high. I would also suggest to give it a class name like @chrisburton suggested. To do that, you simply need this...

<li class="class_name"><a href="url">title</a></li>

...that way you can target that specific li element. Then in your CSS, do this...

.class_name {
    height: 30px;
}

chrisburton

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

mintertweed

@chrisburton: Fixed it (I think). Maybe I am making it worse. Haha! This is what I get for trying to be helpful, I guess.

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

Jarolin

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

treehouse : what would you like to learn today?

Forums

[Solved] how do u target an individual Li element