I am trying to get an ordered list first item shouldn't start with number. The number should start from second item.
please check this URL what I am trying to achieve-- http://jsfiddle.net/kheema/tXtQF/5/
here using counter-reset and counter-increment first item shows 0 and second item starts from 1.. and if anyhow I could remove a 0 my problem will solve.
Does anyone have a better idea on this?
Regards,
Kheema
just change last css rule into
ol li:before {content: ""; color: green; display: inline-block; width: ... ; }
ol li + li:before {content: counter(chapter) "."; }
in this way you insert the content starting from second li element (I used li + li so it can work also with IE8)
see fiddle: http://jsfiddle.net/WwNqN/
Try to add this rule:
ol li:nth-of-type(1):before{content: "";}
This will remove the zero at the first element.
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.
I have been trying to remove the bullet and indent from a < ul> element for quite a while now and I just can't figure out how - or rather why it's not working.
There are several solutions here on overflow, however none of them is working for me.
this should work(?) but it doesn't:
.widget li {list-style: none; } or:
.widget li {list-style-type: none; } (!important does not help)
here is the link to the page with the problem and a picture of the location I mean: any ideas? thanks!
http://wuttke-klima.witconsult.de/neue-firmenzentrale-der-fam-magdeburg/
that arrow is displaying from a :before just display:none it
Remove the left padding to remove padding on li
.arpw-ul li:before { display: none; }
.arpw-ul li { padding-left : 0 }
TIP : Just use google chromes inspect element to test these kind of things. just live results
Looks like you have a pseudo-element that creates the arrow bullet. You should be able to remove it with:
.footer-widget li:before, .widget li:before {
border: none;
}
If that is really a bullet (seems like it is not) then this shall help:
.widget li { display:block; }
But I suspect it is not a bullet but something else (like ::before pseudo element). Use DOM/style inspector tool in your browser.
Try this:
ul {
list-style-type: none;
}
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 need to create a style for ordered lists that follows this format:
(a) List Item 1
(b) List Item 2
(1) List Item 2.1
(2) List Item 2.2
(i) List Item 2.2.1
(ii) List Item 2.2.2
Unfortunately, list-style-type doesn't work because there are no options that show the numbers as listed above, with parentheses.
LOTS of researching has brought about nothing but ugly hacks, for example:
ol {
list-style-type: none;
}
ol>li:before {
content: "(" counter(lvl1, lower-alpha) ") ";
}
ol li {
counter-increment: lvl1;
}
ol ol>li:before {
content: "(" counter(lvl2, decimal) ") ";
}
ol ol>li {
counter-increment: lvl2;
}
ol ol ol>li:before {
content: "(" counter(lvl3, lower-roman) ") ";
}
ol ol ol>li {
counter-increment: lvl3;
}
which works to some extent, removing the list numbering with list-style-type: none; and inserting the number surrounded with parentheses at the beginning of the li. This makes modifying other related styling horrific, as I can't figure out how to line things up nicely etc (I don't think its even possible). It also makes list-style-position redundant, because the numbers are ALWAYS inside the li.
Basically, I'm looking for a way to reproduce this kind of list numbering in CSS: (note text alignment etc)
ANY help VERY MUCH appreciated!!
You're almost there.
Since you're removing list-style, you can restore the position of the counters by applying padding to the list items and then pulling the counters into that padding with a negative margin (or one of many similar techniques e.g. hanging indent)
li {
padding: 2em;
}
li:before {
/* Take counter out of flow and pull it into padding space */
float: left;
margin-left: -2em;
}
You also need to sprinkle some counter-reset into the mix for each level of ol nesting.
JSFiddle showing a full working example with all the nesting code here: http://jsfiddle.net/thefrontender/tzzbh/2/
Anyone know how to add padding between the :before pseudo-element and where the content actually starts?
<ul>
<li><strong>Name Surname</strong></li>
<li>+27.082.555.4155</li>
</ul>
I want only the first li to have a bullet point in it and only if it has a strong element in it.
I have gotten it right using:
.fr_contactInformation ul li strong:before
{
content:url(/App_Themes/2011/images/hm_listImage.gif);
}
.fr_contactInformation ul li strong
{
/*Here is where I am going wrong*/
padding-left: 50px;
}
Thanks all!
you can put padding in the before to make space between it and the element
.fr_contactInformation ul li strong:before
{
content:url(/App_Themes/2011/images/hm_listImage.gif);
padding-left:50px;
}
If you want to control it by pixel, and assuming you only want the bullet on the FIRST li, here's what you're looking for:
.fr_contactInformation ul li.first strong:before
{
content:url(/App_Themes/2011/images/hm_listImage.gif);
padding-right: 20px;
}
Thanks General Henry but that adds padding to the entire element.
I tried this and it worked:
.fr_contactInformation ul li strong:before
{
content: url(/App_Themes/2011/images/hm_listImage.gif) " ";
}
By adding a some space in the inverted comments at the back of the img url, it created that gap I was looking for between the image element and the content.
Then I used a negative margin on the li to bring it back into place.
Thanks ;)