Grow your CSS skills. Land your dream job.

how do u target an individual Li element

  • # January 19, 2013 at 8:33 am

    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.

    # January 19, 2013 at 8:35 am

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

    # January 19, 2013 at 8:47 am

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

    # January 19, 2013 at 8:55 am

    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…

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

    .class_name {
    height: 30px;
    }

# January 19, 2013 at 8:59 am

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

# January 19, 2013 at 9:09 am

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

# January 19, 2013 at 9:23 am

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

# January 19, 2013 at 9:45 am

give the li you want to target an id.

# January 19, 2013 at 10:51 am

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;
}

# January 20, 2013 at 3:45 am

ah.

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

much appreciate everyone chipping in.

warm regards

andreea

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".