Forums

  • # 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:59 am

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

    # 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

    Anonymous
    # 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 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag