I would like to add a border radius to a list of items but I don't want each item to have the style applied to it. Right now my style has the odd list elements with one color and the even elements a darker color. When I apply the border-radius to the li it is visible for each row but I only want the first item and the last item to have this be applied to. How do I make this happen without making a special id or class for only those two list items?
Here is my HTML and CSS:
<section id="list">
<ul>
<li>Song 1</li>
<li>Song 2</li>
<li>Song 3</li>
</ul>
</section>
ul{
list-style:none;
padding-left:0px;
width:600px;
}
ul li:nth-child(odd){
background: rgba(12,147,0,0.4);
}
ul li:nth-child(even){
background: rgba(12,147,0,0.7);
}
li{
padding:15px;
border-radius: 20px;
}
use :first-child and :last-child
li:first-child, li:last-child{
padding:15px;
border-radius: 20px;
}
Related
I'm creating a menu bar with ul li tags and the links are to close together how do I get them to have a bigger space between links?
Give margin on li element ...
<nav>
<ul>
<li><span>Home</span></li>
<li><span>Gallery</span></li>
<li class="last"><span>Map</span></li>
</ul>
</nav>
<style>
li{
display:inline-block;
background:blue;
width:100px;
height:20px;
text-align:center;
margin-right:15px; /* edit this margin to separate your elements*/
}
a{
text-decoration:none;
color:black;
display:block;
}
.last {margin-right:0px;}
</style>
http://jsfiddle.net/Tv7pA/
you can remove margin right from last element like top or with jQuery or with css li:last-child, li:nth-child(3) ... but best way is with jQuery or with class coz it is sup. in all browsers
<li class="red">
<p>Home</p>
</li>
In the CSS, I'd like the bg color of the li element to change, BUT the color of the text has to change too. The problem is, even after I hover of ther li element, I have to go further and actually touch the text in order for it's color to change.
I'll be amazed if this can work.
First remove <p> tag
li.red > a:hover {
color: red;
}
li:hover {
background-color: blue;
}
li:hover p,
li:hover a {
color: yellow;
}
There are 2 things you should take into account:
<p></p> is a block level element. It is not used inside inline-element, in this case, <li></li>
Simply make your <a></a> tag to be a block level element.
So your code should be like this:
<ul>
<li class="red">
Home
</li>
</ul>
Then you could come up with the CSS like this:
.red a:hover {
padding: 10px 20px;
display: block;
background-color: #9900;
color: #FFFFFF;
}
Have simple document with two unordered lists. The two lists are separate from each other in that one is not nested inside of the other.
See working example here: JSfiddle
A class is being applied to the First List, but not the Second List. I'm finding that the class is being applied to all lists on the page, even when the other lists do not share the same class.
Markup:
<style>
#listContainer
{
margin-top:15px;
}
. .expList ul, li
{
list-style: none;
margin:0;
padding:0;
cursor: pointer;
}
.expList li {
line-height:140%;
text-indent:0px;
background-position: 1px 8px;
padding-left: 20px;
background-repeat: no-repeat;
}
.expList { clear:both;}
</style>
<p style='font-size:1.4em;'>First list</p>
<div id='listContainer'>
<ul class='expList'>
<li>A<ul><li>A1</li></ul></li>
<li>A</li>
</ul>
</div>
<hr>
<p style='font-size:1.4em;'>Second list. </p>
<ul>
<li><b>Cats</b>
<ul>
<li>Cheezburger</li>
<li>Ceiling</li>
<li>Grumpy</li>
</ul>
</li>
<li><b>Role Models</b>
<ul>
<li>Bad Luck Brian</li>
<li>Paranoid Parrot</li>
<li>Socially Awkward Penguin</li>
</ul>
</li>
</ul>
Why would applying a class to a completely separate UL affect a different, non-nested UL on the same page?
EDIT - see the accepted answer to this question for a very good explanation of this problem.
You're applying the style to all li elements:
.expList ul, li
...means "ul elements in element with class expList, and all li elements".
Since it is the ul that has class expList, I'm wondering if you actually want:
.expList li { ... }
Meaning all li elements in ul.expList. Guessing though, hard to say without more info.
I'm experimenting here with Pseudo-classes and trying to something I would usually do with a style class. I have a unordered list with multiple sub unordered lists and so on.
I want to only make sure the first level of li tags are been set to float left.
Here is my html
<body>
<div id="MainMenu">
<ul id="nav">
<li>Home</li>
<li>
About
<ul>
<li>The Product</li>
<li>Meet The Team</li>
</ul>
</li>
<li>
Contact
<ul>
<li>
Business Hours
<ul>
<li>Week Days</li>
<li>Weekends</li>
</ul>
</li>
<li>Directions</li>
</ul>
</li>
</ul>
</div>
</body>
I tried a style like this.
body {
font: 13px/160% Trebuchet MS,Arial,Helvetica,Sans-Serif;
margin:0;
padding:0
}
#nav{
list-style:none;
font-weight:bold;
width:100%;
}
#nav li{
float:left;
margin-right:40px;
position:relative;
}
The issue with this is, its saying all li descendants of id nav get set to float left. Now I only want the first level li tags to float to left and all the other level li tags to be ignored. Please don't answer by saying use a class name for all the top level li tags. I already am aware I could approach it like this. What I'm after is to learn some of the Pseudo-classes and how they may help me in this approach.
For example I need something that is like #nav li:first-child{ .... } But this is only going to give me the first li in the top ul list. I want all the top level children of the ul list and ignore the second level li tags and so on. Is there a Pseudo-classes that can accomplish this.
Thanks
you can use #nav > li this matches all elements that are the immediate li children of #nav.
More info here and here.
A demo: http://jsfiddle.net/9M6p2/
A good approach would be:
#nav li { float: left; }
#nav li li { float: none; }
You could use #nav li like you already do and #nav li ul or #nav li ul li to style the second level LI-Elements.
I have a menu built with <ul> and <li> tags. I want to have small separators between sections. For the separators, I just set a background color and a short height on an <li>. Looks very nice... except in IE7 where the <li> seems to refuse to change its height to be shorter than all the other <li>s in the same <ul>. I have tried different ways of affecting the height of the separator <li> (height, line-height, font-size) with no success.
I have a fix that will leave the separator height as is and color the whole background in IE 7, but that is not really the appearance I want (the separator is too big). Can anyone think of another way to control the height of an <li> tag?
Here is a sample - in IE8 toggling compatibility view will show the problem:
<style type="text/css">
.menu {
width:100px;
}
.menu ul {
list-style-type:none;
border-top: solid 1px red;
padding: 0px;
margin:0px;
}
.menu ul li {
border-bottom: solid 1px red;
padding: 0px;
margin:0px;
white-space:nowrap;
}
.menu ul li a {
font-size: 13px;
text-decoration: none;
color: black;
display: block;
padding: 3px;
}
.menu ul li a:hover {
color: blue;
text-decoration: underline;
}
.menu ul li.separator {
height:4px;
background-color:red;
}
</style>
<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="separator"></li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
The problem is that ie6/ie7 will expand an empty element to the height of your font. You can get around this by adding font-size:0 and line-height:0 to .menu ul li.separator.
A better solution would be to add a thicker bottom border to the <li> that is before the separator.
.menu ul li.sep {border-bottom-width:6px}
<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="sep">Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
Set your css for the LI to display: block;.
Maybe you should try setting your li as follows:
li{
display:block;
float:left;
height:myHeight;
clear:right;//may be necessary, can't check with IE7
}
This is what I've done with similar problems.
In addition to Daniel A. White answer you can experiment with line-height to center your text vertically and create the necessary height.
Do what was suggested in the previous posts. If these changes are causing issues in browsers other than IE, you can do the following to have only IE use them:
.selector {
prop1 : val1; /* default value for all browsers */
*prop1 : val2; /* only IE will pick this one up and it will override the initial value of prop1. */
}
This works much better than trying to do special commenting to include separate style sheets, etc.
Have you tried adding a line-height attribute to .menu ul li?
Else have you tried using horizontal rule <hr> as a separator instead? If you're using horizontal rule, you can set the margin-top and margin-bottom to 0px and see what happens. Can't guarantee it looks the same on IE and other browsers, but at least you tried. =)