- This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
Viewing 8 posts - 1 through 8 (of 8 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
Depends which one but you can use `first-child`, `last-child` or `nth-child`. That or give it a specific class name.
It should be pointed out that the last option (individual class) has the best browser support.
@mintertweed You’re targeting the anchor tag not list-item for the height.
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
give the li you want to target an id.
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;
}
ah.
how silly of me. thanks very much everyone; simple solution to a simple problem. Great!!!
much appreciate everyone chipping in.
warm regards
andreea