I have a annoying problem .. I want my first 4 items in a list to be numbered but I wanna leave fifth item out of numbering .. here is my css :
#alternate_navigation ol
{
display:block;
padding:0;
margin:0;
counter-reset: item;
}
#alternate_navigation li
{
display:block;
padding:0px 0px 0px 10px;
margin:0;
background: url('images/list_bg.jpg') no-repeat;
height:19px;
width:99%;
border-bottom:1px solid #B9B5B2;
}
#alternate_navigation li:before
{
content: counter(item) ". ";
counter-increment: item ;
}
RESULT :
Online Booking
Coupon Ordering
Print Letters
Send Emails
View orders
How could I achieve for last item not to be numbered like this :
Online Booking
Coupon Ordering
Print Letters
Send Emails
View orders
and yes HTML
<div id="alternate_navigation">
<ol>
<li>Online Booking</li>
<li>Coupon Ordering</li>
<li>Print Letters</li>
<li>Send Emails</li>
<li>View orders</li>
</ol>
<div>
Thank you for any response
After your current CSS, add:
#alternate_navigation li:last-child:before {
content: "";
counter-increment: none;
}
That should 'reset' the style for the last element.
EDIT: I should just mention that this will not work in IE8 due to the use of :last-child. If you need IE6/7/8 compatibility, I would use something like JQuery instead of manually inserting HTML markup.
Is it possible that the browser you are using doesn't support content, counter-reset, :before, or counter-increment?
I'm pretty sure IE doesn't, and I'm not certain about others. If that is the case, you're just recieving the default numbered list: in short, the browser would ignore the newer CSS.
You can aplly a css class to reset that counter, like this example :
#alternate_navigation li.last:before
{
content: "";
counter-increment: none ;
}
Check my example :
http://www.aeon-dev.org/tests/before_pseudo_ie.html
Out of curiousity, in this case why are you using the counter-reset at all? Why not set
list-style: decimal;
and then for your html add a class to your last <li> tag like <li class="last">?
Then you can set
li.last { list-style: none; }
Related
Firstly, happy new year to you all! :)
Ok let's get to it. I have 5 items in my menu, and i would like to color "+" part of the word to red, choosing 2nd,3rd and 4th item of menu.
This is what menu looks like right now.
This is how the menu should look like, when its done.
I might have given a bad picture, but i think you can see the red "+" on 2nd,3rd and 4th item of menu.
This is what i've tried so far, but i can't seem to figure out the nth-child method.
#menu li:nth-child(2):first-letter a{color:red;}
Also tried this, but it colors every first letter in all 5 elements :S
#menu .nav > li > a:first-letter{color:red;}
Any help will be appreciated!
Thank you all!
I've managed to find the solution. Not sure if it's the best one, but im posting it below, so that any1 in the future can use it too, if no other solution is found
#menu .nav > li:nth-child(2) > a:first-letter
{
color:red;
}
#menu .nav > li:nth-child(3) > a:first-letter
{
color:red;
}
#menu .nav > li:nth-child(4) > a:first-letter
{
color:red;
}
Use the :not() selector to have all but one selected like this:
#menu{
background: rgb(83,83,83);
width: 100vw;
height: 40px;
}
ul{
text-align: center;
line-height: 40px;
vertical-align: central;
}
ul li{
display: inline-block;
color: white;
list-style: none;
margin-left: 25px;
}
a{
color: white;
display: block;
}
#menu ul li:not(:first-child):not(:last-child) a::first-letter{
color: red;
}
<div id="menu">
<ul>
<li>+option</li>
<li>+option</li>
<li>+option</li>
<li>+option</li>
<li>+option</li>
</ul>
</div>
I know this question already has an accepted answer, but I think there is a semantically better way of doing this. Instead of having the + symbol inside the link's markup, why not add it as a pseudo :before element? Easier to style and not dependent on your markup.
<nav>
<ul>
<li>Domov</li>
<li class="with-symbol">Naravni kamen</li>
<li class="with-symbol">Dekorativni kamen</li>
<li class="with-symbol">Keramika</li>
<li>Kontakt</li>
</ul>
</nav>
And the respective CSS:
.with-symbol:before {
content: '+';
color: red;
}
Then position it with either position: absolute; or negative left margin.
From the docs (https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Afirst-letter): A first line has meaning only in a block-container box, therefore the ::first-letter pseudo-element has an effect only on elements with a display value of block, inline-block, table-cell, list-item or table-caption. In all other cases, ::first-letter has no effect. So you will need to add display: block to your anchor tags.
I would also change the selector to:
ul li a:first-letter {
color:red;
}
as you need to select the first letter of the anchor tag, not the list item.
As a side note, it might be a better solution to use a span as suggested above or pseudo elements to insert the plus character and use a class to determine if it should be displayed or no.
Here is my first question on StackOverflow!
Using JQuery UI, I want to build two sortable lists, the send list being displayed vertically, and the receive list horizontally. The receive list already has some values in it.
My problem is there's a little space between items already in the receive list, that don't appear when the user adds others items from the send list. It's not a blocking issue, but it sure doesn't look very professional...
I checked all the CSS properties, and all LI are the same. I really have no idea what to do...
Here is the code (Fiddle: http://jsfiddle.net/t5gwfkkp/):
HTML
<ul id="receive">
<li>un</li>
<li>deux</li>
</ul>
<br>
<ul id="send">
<li>trois</li>
<li>quatre</li>
<li>cinq</li>
</ul>
CSS
#receive li {
display:inline-block !important;
}
ul {
list-style-type: none;
}
Javascript
$("#send").sortable({
connectWith: '#receive',
});
$("#receive").sortable();
$("#receive").disableSelection();
$("#receive li").addClass("ui-widget-content");
Anyone has an idea?
Found the issue. When you float:left the list items, the ul doesn't render as a block.
This will work:
http://jsfiddle.net/t5gwfkkp/2/
<ul id="receive">
<li>un</li>
<li>deux</li>
</ul>
<br>
<ul id="send">
<li>trois</li>
<li>quatre</li>
<li>cinq</li>
</ul>
#receive li {
float: left;
margin-right: 5px;
}
ul {
list-style-type: none;
display:block;
overflow:hidden
}
#send {
width:50px;
}
Well, mi question is very similar to this question: How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?
But in my case, I want to style the letters in an lower-alpha list (or any ordered list), but considering that each item will have a different content, so, I can't use the content:""; trick.
Is there any way to do this without JS or something?
I tried to play with different combinations of pseudo classes and pseudo elements, but I think that's not the right way.
The code I tried, as you can see in the fiddle:
Relevant HTML
<ol>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
</ol>
CSS I have tried (without success)
/*ol li:first-letter {color:red;}*/
/*ol li:first-child {color:red;}*/
/*ol li:before {content:"lower-alpha";}*/
/*ol li:before:first-letter {content:"lower-alpha";}*/
/*ol:first-letter li {color:red;}*/
ol:first-letter li {color:red;}
ol li {color:black;}
Here is a possibility using the counter-reset / counter-increment properties:
ol {list-style:none; margin:0; padding:0; counter-reset:list;}
ol li {margin:0 0 5px; padding:0;}
ol li:before {
counter-increment:list;
content:counter(list, lower-alpha) ". ";
color:red;
}
see fiddle: http://jsfiddle.net/jRVH5/14/
For future generations: Newest addition to browsers (FF68+, Ch80+)
::marker {
color: red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/::marker
Style the bullets/characters of a list by using either ol or li CSS properties. Then use a span tag inline to change the actual list item text to be something different if you like.
li {
color: green;
}
span {
color: black;
}
http://jsfiddle.net/jRVH5/9/
I want to have multiple "ol" lists where the counter value does not reset between lists. Another way to say this is that I want the counter for the first "li" in the second list to be one higher than the counter value from the last element of the previous list. Is there some CSS magic that will do this?
While Su's answer would work, you don't need to be so heavy-handed. Just reset the counter at the top, and everywhere you use it, it will increment.
body {
counter-reset: item;
}
li {
display: block;
}
li:before {
display: inline-block;
content: counter(item) ". ";
counter-increment: item;
}
see this example
Not quite with just CSS. It does provide you with some control over counters (and support is pretty good), but it's still static in it's behavior. So this works:
<html>
<head>
<style>
#list-one {
counter-reset : item;
}
#list-two {
counter-reset : item 3;
}
li {
display : block;
}
li:before {
display : inline-block;
content : counter(item) ". ";
counter-increment : item;
}
</style>
</head>
<body>
<ol id="list-one">
<li>One</li><li>Two</li><li>Three</li>
</ol>
<ol id="list-two">
<li>Four</li><li>Five</li><li>Six</li>
</ol>
</body>
</html>
…but you can't just drop two lists after each other and have the second one automatically pick up where the other left off(see the "3" in the second CSS rule). With a little creativity, though, you could probably wrap the counter-reset styling with a bit of PHP or whatever you're using to build your site. This is dependent upon the particulars of your situation, of course.
Is there a CSS property that tells the browser to word-wrap at any position, not only at word boundaries?
My current issue is this. I am faced with HTML similar to this: (I cannot change the HTML, unfortunately)
<div id='categories'>Categories:
<ul>
<li>Category One</li>
<li>Category Two</li>
<li>Category Three</li>
</ul>
</div>
I want it to display in a flowing manner according to the width of the viewport:
Categories: • Category One • Category Two • Category Three
|----------------------------------------------------------------| (viewport)
Categories: • Category One • Category Two
• Category Three
|----------------------------------------------| (viewport width)
Categories: • Category One
• Category Two • Category Three
|----------------------------------| (viewport width)
... but NOT word-breaking within a category name.
So I tried this:
#categories ul {
display: inline;
}
#categories li {
display: inline;
padding: 0 1em;
white-space: nowrap;
}
#categories li:before {
content: '• ';
}
Unfortunately this causes them all to run in one line. So I need to be able to tell the ul to allow wrapping anywhere between any adjacent lis. How do I do that?
I need a CSS-only solution; I cannot change the HTML...
A useful trick for wrapping boxes is to make them all float: left. If I do this to your example, then I get the layout you want except for "Categories:" being pushed to the right. Unfortunately, I don't know of a way to select the text so as to make it floated.
We can use content to re-insert "Categories:" as one of the floated boxes, which leaves the problem of how to hide the existing "Categories:" text without hiding the other contents of #categories. The cleanest way I thought of was to make it transparent. However, this is a CSS3 feature; also, this loses any inherited color due to the need to explicitly set it on the ul.
This stylesheet produces everything you want, but needs some tweaking for spacing.
#categories {
color: transparent;
}
#categories ul {
color: black;
}
#categories li {
display: inline;
float: left;
padding: 0 1em;
white-space: nowrap;
}
#categories li:before {
content: '• ';
}
#categories li:first-child:before {
content: 'Categories: • ';
}
Maybe this?
<ul>Categories: <li>Category One</li><wbr><li>Category Two</li><wbr><li>Category Three</li></ul>