What I am trying to do is:
Assume that I have the following list:
Item 1
Item 2
Item 3
Item 4
I want to alternate between two colours so for example:
Item 1 (Blue)
Item 2 (Orange)
Item 3 (Blue)
Item 4 (Orange)
But I want this behaviour to be controlled in CSS so I can just write:
<ul>
<li>Item 1</li>
</ul>
Can anyone point me in the right direction to how I would achieve this?
You can use :nth-child pseudo class:
ul li:nth-child(2n+1) { color: blue; }
ul li:nth-child(2n) { color: orange; }
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
You can use CSS :nth-child
li { color: blue; }
li:nth-child(odd) { color: orange; }
JSFiddle Code
Related
I am trying to cater for line breaks in a list so that the bullet points are used more like separators instead, I have this so far...
ul {
margin:auto;
max-width:280px;
list-style:none;
text-align:center;
}
li::before {
content: "•";
color: red;
}
li {
display:inline;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
How can I make sure that list items aren't split between lines and also make sure that bullet points only display if it isn't a new line?
I am try to make things look like this...
The width of the container and the number of items does change so trying to do this without assigning individual classes
A couple of techniques will help you achieve this effect.
1st use first-child on the list element to hide the first separator.
The second is a little hacky but it's the way to hide the bullet when the menu rows wrap; Use a pseudo-element on the ul to create an overlay to hide the first bullet in the second row.
If you want to align the bottom row to the middle you're going to want to use flexbox, with justify-content:center and move your bullet to the right after each element. Move the ul overlay to the right and hide the bullet of the last-child instead of the first-child.
ul{margin:auto;max-width:300px;list-style:none;text-align:center; position:relative; overflow:hidden;padding-left:0; display:flex; flex-wrap:wrap; justify-content: center; }
ul:before {content:" "; height: 100%; position:absolute; right:0; width:0.75rem; background-color: #fff; z-index:2; }
ul> li{display:inline; padding:0 0.5rem; position:relative;}
ul > li:before {position:absolute; right:0; transform:translateX(50%); content: "•"; color: red;}
ul > li:last-child:before{ display:none;}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
I have an HTML list with display: inline-block which I want to separate with a line to make a footer menu.
For that I apply a left border for every list item that has an item before. However, when screen is smaller and the line breaks, the first item in the second line shows the border.
How can I hide the border on the first item on the second line once the line breaks?
Here is a fiddle: https://jsfiddle.net/ur7dyL7u/3/
<style type="text/css">
li {
line-height: 24px;
display: inline-block;
border-right: none;
}
li~li {
border-left: red 2px solid;
padding-left: 5px;
}
div{
text-align:center;
}
</style>
<div>
<ul>
<li>Item nr 1</li>
<li>Item nr 2</li>
<li>Item nr 3</li>
<li>Item nr 4</li>
<li>Item nr 5</li>
<li>Item nr 6</li>
<li>Item nr 7</li>
<li>Item nr 8</li>
<li>Item nr 9</li>
<li>Item nr 10</li>
</ul>
<div>
I think there is no way to do that the way you want to, you will have to change the approach;
I tried those styles to achieve what you want:
ul{
padding:0; overflow:hidden;
}
li {
line-height: 24px;
display: inline-block;
border-right: none;
padding-left: 5px;
}
li~li {
box-shadow: -2px 0px 0px red;
}
Instead of a border, I use box shadow that is outside the box and set overflow hidden to the list so it will always hide the shadow of the first element on each line.
Here is a working example: https://jsfiddle.net/2o18jkfL/
Another one that "works" with text-align:center
http://codepen.io/sergio0983/pen/YpKxzQ
EDIT
Different approach using :before to cover the line on the first item in each line:
http://codepen.io/sergio0983/pen/eBOEpY
If you have no problem with having a separation in the first line when line-breaks you can do this:
Instead of using border-left use border-right in all your li elements except the last one.
ul {
text-align: center;
}
li {
line-height: 14px;
display: inline-block;
}
li:not(:last-child) {
border-right: red 1px solid;
padding-right: 10px;
}
<ul>
<li>Item nr 1</li>
<li>Item nr 2</li>
<li>Item nr 3</li>
<li>Item nr 4</li>
<li>Item nr 5</li>
<li>Item nr 6</li>
<li>Item nr 7</li>
<li>Item nr 8</li>
<li>Item nr 9</li>
<li>Item nr 10</li>
</ul>
I have two divs. When I rollover on a link, I want to hide one div and show the other so it appears as if the background color has changed. Here is some example HTML:
<div id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="sub-nav">
<ul>
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
</ul>
</div>
The sub-nav div is EXACTLY the same as the main-nav div, except the background-color is different.
#main-nav {
width: 500px;
height: 250px;
background-color: black;
display: block;
}
#sub-nav {
width: 500px;
height: 250px;
background-color: white;
display: none;
}
All I want to do is show the #sub-nav div whenever an item in the #main-div is hovered over. So the effect will be that the background-color appears to change from black to white on hover.
Can I do this using only CSS?
Basically I am wanting to know if I can change the display property of a containing div whenever an element inside that div (the <a> tag) is hovered over? That is, hovering on a link should cause its containing div #main-nav to change to display: none and the #sub-nav div to become display:block
No you can't do this just with CSS. You would need the subnav to be a child of the element you are hovering or directly adjacent to it.
You could use css selectors like
#main-nav li:hover .sub-nav{}
or
#main-nav li:hover + .sub-nav{}
Alternatively you could use javascript
Why not just change the background color? Like this:
<div id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
#main-nav:hover { background-color: black; }
Edit you can do exactly what you asked, but you'd need a wrapper for that:
<div class="navigation-wrapper">
<div class="main">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="sub">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
And in your css:
.navigation-wrapper .sub { display: none; }
.navigation-wrapper:hover .main { display: none; }
.navigation-wrapper:hover .sub { display: block; }
Fiddle demo
So sorry if I'm asking a question that's been answered elsewhere...I can't find the answer, perhaps because I don't know how to ask it.
But I'm trying to figure out how to affect list items by setting up the class for the ul, so I only have to call the class in the ul without having to call the class for every list item.
I have a list of blue dot icons and a list of green dot icons.
I want to be able to do this
<ul class="greendot">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
with the css like so:
ul.greendot {
list-style-image: url(http://greendot.jpg);
}
Thank you!
I recommend that you remove the bullet at the UL, then add a background image as the style for each LI...
The styles should look like this...
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul.greendot li
{
background-image: url(greendot.png);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
and the html body looks like this...
test
<ul class="greendot">
<li>test 1</li>
<li>test 2</li>
</ul>
See, If your CSS is ul.greendot then it will work for <ul class="greendot"> ....</ul>
And if you CSS is only for ul then it will work for both ul list.
<!DOCTYPE html>
<html>
<head>
<style>
/* only for greendot ul */
ul.greendot
{
list-style-image:url('http://greendot.jpg');
}
/* For both ul */
ul
{
list-style-image:url('http://greendot.jpg');
}
</style>
</head>
<body>
<ul class="greendot">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
<ul class="reddot">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
</body>
</html>
How do you retain the indentation of numbered lists? I have a page where the numbers are pushed off the page. How can I prevent this?
<ol style="padding: 0">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
With a CSS rule like this:
ol { margin-left: 30px; }
Here's some information about the CSS box model.
What about using:
li { list-style-position: outside; }