Description:- Counter is incrementing contentiously on slide toggle. it's giving contentious number to the li outside ol. issue is coming in chrome and it's working fine in Mozilla. so what's the solution for this?
I have attached output file at bottom.
<ol class="nav">
<li>
Parent-1
<ol class="nav">
<li>child1</li>
<li>child2</li>
</ol>
</li>
<li>parent-2
<ol class="nav">
<li>
child-1
<ol class="nav">
<li>inner-most-1</li>
<li>innner-most-2</li>
</ol>
</li>
<li>child-2</li>
</ol>
</li>
<li>parent-3</li>
</ol>
Jquery
$(function() {
$(".nav ol").hide();
$(".nav > li > a").click(function(e) {
$(this).siblings("ol").slideToggle();
e.preventDefault();
});
});
CSS:-
ol{
counter-reset: section;
list-style-type: none;
}
ol li{
counter-increment: section;
}
ol li:before {
content: counters(section,".") " ";
}
OTPUT looks like
Output -2
JS_Fiddle:-
https://jsfiddle.net/tushar115/f6zvu8w5/10/
This is an bug in Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=822260 I'm thinking the only solution will be for Google to fix this. Otherwise someone would have to recreate the entire functionality of numbered lists.
Related
Consider the following code:
<ol class=top>
<li>Top item
<ol>
<li>Sub</li>
<li>list</li>
<li>item.</li>
</ol>
</li>
</ol>
And css:
.top > li {
text-decoration: underline;
}
.top ol li {
text-decoration: none;
}
Fiddle: http://jsfiddle.net/fLvns1z0/1/
I want only the "Top item" be underlined, but instead whole text is underlined. Even !important doesn't help.
Any ideas how to make it work and keep the code as simple as possible?
If you don't want to add an extra span or any other element to achieve the result as said by others, you can use css :first-line sudo class, check the working example below:
.top > li:first-line {
text-decoration: underline;
}
<ol class="top">
<li>Top item
<ol>
<li>Sub</li>
<li>list</li>
<li>item.</li>
</ol>
</li>
</ol>
It looks like it's because of the behaviour of <li> tag. If possible, please add a <span> and it should be fine:
.top span {
text-decoration: underline;
}
<ol class=top>
<li><span>Top item</span>
<ol>
<li>Sub</li>
<li>list</li>
<li>item.</li>
</ol>
</li>
</ol>
Also, when you add a <span> tag, you are clearly giving a separation. Plus the real reason is I am unable to fix the other way. Sorry about that. :(
You can redefine text-decoration with the same color as background:
.top > li {
text-decoration: underline;
}
.top ol li{
text-decoration: underline;
text-decoration-color: #fff;
}
<ol class=top>
<li>Top item
<ol>
<li>Sub</li>
<li>list</li>
<li>item.</li>
</ol>
</li>
</ol>
Or make some changes to the behavior of elements:
.top > li {
text-decoration: underline;
}
.top ol{
display:inline-block;
width:100%;
box-sizing:border-box;
}
<ol class=top>
<li>Top item
<ol>
<li>Sub</li>
<li>list</li>
<li>item.</li>
</ol>
</li>
</ol>
I have constructed a three-level dropdown using CSS. It works until I add this to the CSS:
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
The HTML is basically just two unordered lists (by the way, the "feelings" list and the "needs" list have the same content -- that will change eventually -- this is just for experimenting!):
<div class="feelings">
<ul class="nav feelings">
<li class="feelings" id="feelings"> FEELINGS
<ul>
<li>AFRAID
<ul>
<li>apprehensive</li>
<li>dread</li>
<li>foreboding</li>
<li>frightened</li>
<li>mistrustful</li>
<li>panicked</li>
<li>petrified</li>
<li>scared</li>
<li>suspicious</li>
<li>terrified</li>
<li>wary</li>
<li>worried</li>
</ul>
</li>
<li>ANNOYED
<ul>
<li>aggravated</li>
<li>dismayed</li>
<li>disgruntled</li>
<li>displeased</li>
<li>exasperated</li>
<li>frustrated</li>
<li>impatient</li>
<li>irritated</li>
<li>irked</li>
</ul>
</li>
<li>ANGRY
<ul>
<li>enraged</li>
<li>furious</li>
<li>incensed</li>
<li>indignant</li>
<li>irate</li>
<li>livid</li>
<li>outraged</li>
<li>resentful</li>
</ul>
</li>
<li>AVERSION
<ul>
<li>animosity</li>
<li>appalled</li>
<li>contempt</li>
<li>disgusted</li>
<li>dislike</li>
<li>hate</li>
<li>horrified</li>
<li>hostile</li>
<li>repulsed</li>
</ul>
</li>
<li>CONFUSED
<ul>
<li>ambivalent</li>
<li>baffled</li>
<li>bewildered</li>
<li>dazed</li>
<li>hesitant</li>
<li>lost</li>
<li>mystified</li>
<li>perplexed</li>
<li>puzzled</li>
<li>torn</li>
</ul>
</li>
<li>DISCONNECTED
<ul>
<li>alienated</li>
<li>aloof</li>
<li>apathetic</li>
<li>bored</li>
<li>cold</li>
<li>detached</li>
<li>distant</li>
<li>distracted</li>
<li>indifferent</li>
<li>numb</li>
<li>removed</li>
<li>uninterested</li>
<li>withdrawn</li>
</ul>
</li>
<li>DISQUIET
<ul>
<li>agitated</li>
<li>alarmed</li>
<li>discombobulated</li>
<li>disconcerted</li>
<li>disturbed</li>
<li>perturbed</li>
<li>rattled</li>
<li>restless</li>
<li>shocked</li>
<li>startled</li>
<li>surprised</li>
<li>troubled</li>
<li>turbulent</li>
<li>turmoil</li>
<li>uncomfortable</li>
<li>uneasy</li>
<li>unnerved</li>
<li>unsettled</li>
<li>upset</li>
</ul>
</li>
<li>EMBARRASSED
<ul>
<li>ashamed</li>
<li>chagrined</li>
<li>flustered</li>
<li>guilty</li>
<li>mortified</li>
<li>self-conscious</li>
</ul>
</li>
<li>FATIGUE
<ul>
<li>beat</li>
<li>burnt out</li>
<li>depleted</li>
<li>exhausted</li>
<li>lethargic</li>
<li>listless</li>
<li>sleepy</li>
<li>tired</li>
<li>weary</li>
<li>worn out</li>
</ul>
</li>
<li>PAIN
<ul>
<li>agony</li>
<li>anguished</li>
<li>bereaved</li>
<li>devastated</li>
<li>grief</li>
<li>heartbroken</li>
<li>hurt</li>
<li>lonely</li>
<li>miserable</li>
<li>regretful</li>
<li>remorseful</li>
</ul>
</li>
<li>SAD
<ul>
<li>depressed</li>
<li>dejected</li>
<li>despair</li>
<li>despondent</li>
<li>disappointed</li>
<li>discouraged</li>
<li>disheartened</li>
<li>forlorn</li>
<li>gloomy</li>
<li>heavy hearted</li>
<li>hopeless</li>
<li>melancholy</li>
<li>unhappy</li>
<li>wretched</li>
</ul>
</li>
<li>TENSE
<ul>
<li>anxious</li>
<li>cranky</li>
<li>distressed</li>
<li>distraught</li>
<li>edgy</li>
<li>fidgety</li>
<li>frazzled</li>
<li>irritable</li>
<li>jittery</li>
<li>nervous</li>
<li>overwhelmed</li>
<li>restless</li>
<li>stressed out</li>
</ul>
</li>
<li>VULNERABLE
<ul>
<li>fragile</li>
<li>guarded</li>
<li>helpless</li>
<li>insecure</li>
<li>leery</li>
<li>reserved</li>
<li>sensitive</li>
<li>shaky</li>
</ul>
</li>
<li>YEARNING
<ul>
<li>envious</li>
<li>jealous</li>
<li>longing</li>
<li>nostalgic</li>
<li>pining</li>
<li>wistful</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="needs">
<ul class="nav needs">
<li class="feelings" id="needs"> NEEDS
<ul>
<li>AFRAID
<ul>
<li>apprehensive</li>
<li>dread</li>
<li>foreboding</li>
<li>frightened</li>
<li>mistrustful</li>
<li>panicked</li>
<li>petrified</li>
<li>scared</li>
<li>suspicious</li>
<li>terrified</li>
<li>wary</li>
<li>worried</li>
</ul>
</li>
<li>ANNOYED
<ul>
<li>aggravated</li>
<li>dismayed</li>
<li>disgruntled</li>
<li>displeased</li>
<li>exasperated</li>
<li>frustrated</li>
<li>impatient</li>
<li>irritated</li>
<li>irked</li>
</ul>
</li>
<li>ANGRY
<ul>
<li>enraged</li>
<li>furious</li>
<li>incensed</li>
<li>indignant</li>
<li>irate</li>
<li>livid</li>
<li>outraged</li>
<li>resentful</li>
</ul>
</li>
<li>AVERSION
<ul>
<li>animosity</li>
<li>appalled</li>
<li>contempt</li>
<li>disgusted</li>
<li>dislike</li>
<li>hate</li>
<li>horrified</li>
<li>hostile</li>
<li>repulsed</li>
</ul>
</li>
<li>CONFUSED
<ul>
<li>ambivalent</li>
<li>baffled</li>
<li>bewildered</li>
<li>dazed</li>
<li>hesitant</li>
<li>lost</li>
<li>mystified</li>
<li>perplexed</li>
<li>puzzled</li>
<li>torn</li>
</ul>
</li>
<li>DISCONNECTED
<ul>
<li>alienated</li>
<li>aloof</li>
<li>apathetic</li>
<li>bored</li>
<li>cold</li>
<li>detached</li>
<li>distant</li>
<li>distracted</li>
<li>indifferent</li>
<li>numb</li>
<li>removed</li>
<li>uninterested</li>
<li>withdrawn</li>
</ul>
</li>
<li>DISQUIET
<ul>
<li>agitated</li>
<li>alarmed</li>
<li>discombobulated</li>
<li>disconcerted</li>
<li>disturbed</li>
<li>perturbed</li>
<li>rattled</li>
<li>restless</li>
<li>shocked</li>
<li>startled</li>
<li>surprised</li>
<li>troubled</li>
<li>turbulent</li>
<li>turmoil</li>
<li>uncomfortable</li>
<li>uneasy</li>
<li>unnerved</li>
<li>unsettled</li>
<li>upset</li>
</ul>
</li>
<li>EMBARRASSED
<ul>
<li>ashamed</li>
<li>chagrined</li>
<li>flustered</li>
<li>guilty</li>
<li>mortified</li>
<li>self-conscious</li>
</ul>
</li>
<li>FATIGUE
<ul>
<li>beat</li>
<li>burnt out</li>
<li>depleted</li>
<li>exhausted</li>
<li>lethargic</li>
<li>listless</li>
<li>sleepy</li>
<li>tired</li>
<li>weary</li>
<li>worn out</li>
</ul>
</li>
<li>PAIN
<ul>
<li>agony</li>
<li>anguished</li>
<li>bereaved</li>
<li>devastated</li>
<li>grief</li>
<li>heartbroken</li>
<li>hurt</li>
<li>lonely</li>
<li>miserable</li>
<li>regretful</li>
<li>remorseful</li>
</ul>
</li>
<li>SAD
<ul>
<li>depressed</li>
<li>dejected</li>
<li>despair</li>
<li>despondent</li>
<li>disappointed</li>
<li>discouraged</li>
<li>disheartened</li>
<li>forlorn</li>
<li>gloomy</li>
<li>heavy hearted</li>
<li>hopeless</li>
<li>melancholy</li>
<li>unhappy</li>
<li>wretched</li>
</ul>
</li>
<li>TENSE
<ul>
<li>anxious</li>
<li>cranky</li>
<li>distressed</li>
<li>distraught</li>
<li>edgy</li>
<li>fidgety</li>
<li>frazzled</li>
<li>irritable</li>
<li>jittery</li>
<li>nervous</li>
<li>overwhelmed</li>
<li>restless</li>
<li>stressed out</li>
</ul>
</li>
<li>VULNERABLE
<ul>
<li>fragile</li>
<li>guarded</li>
<li>helpless</li>
<li>insecure</li>
<li>leery</li>
<li>reserved</li>
<li>sensitive</li>
<li>shaky</li>
</ul>
</li>
<li>YEARNING
<ul>
<li>envious</li>
<li>jealous</li>
<li>longing</li>
<li>nostalgic</li>
<li>pining</li>
<li>wistful</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Here is the CSS:
#charset "UTF-8";
/* CSS Document */
ul ul, ul ul ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
.nav feelings needs {
padding-left: 10px;
padding-right: 10px;
width: 200px;
color:#ff0000;
background-color:#ffffff;
}
.nav{
height: 39px;
border-radius: 3px;
min-width:500px;
border:1px solid #ddd;
background-color:#ffffff;
}
.nav li, .nav li li {
list-style: none;
display: block;
float: left;
height: 40px;
position: relative;
background-color:#ffffff;
}
.nav a {
width: 200px;
overflow:hidden;
}
.nav li a{
display: block;
}
.nav ul {
display: none;
visibility:hidden;
position: absolute;
top: 40px;
}
.nav ul ul {
top: 0px;
left:170px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
position: relative;
}
.nav ul li {
display: block;
visibility:visible;
}
.nav li:hover > ul, nav li:hover * {
display: block;
visibility:visible;
z-index:1;
}
If I eliminate the first CSS item (setting the menu to two columns), the last level of the menu appears (the items in small letters as opposed to all caps). With the two-column CSS in place, the third level doesn't appear.
Here is a fiddle:
http://jsfiddle.net/Lq7NK/2/
Interestingly, on the fiddle, the third level does seem to be trying to appear a bit, but it's certainly not working the way I'd like it to, which is the third level appearing in a vertical column to the right of the second level item.
Any thoughts will be appreciated!
/* image below was added after original question, in response to a request for a picture */
The top screenshot in this picture shows what comes up now when I hover over the first feeling, AFRAID -- and it is actually pretty much what I want (though obviously it needs some prettifying): two sets of two-column dropdowns, namely, the one in all caps and the one in all small letters. (This is basically with the code shown above, but with one change, namely, removing ul ul to leave only ul ul ul as suggested by user3369554.) However, when I move the cursor, stuff starts jumping all over the place; the screenshot on the bottom shows one state, but things just jump all over in a very disconcerting way. For instance, I would like to be able to just move the cursor over to where ANGRY is at the top of the second column. But if I try to do that, it jumps to somewhere else. And if I go to that place, it jumps to still another location. If the both sets of emotions (all caps and all small letters) would hold still in the configuration shown at the top, and let me click on them, I'd be happy.
I don't know if I'm understanding well, but you can get the third level in a 2 column format to the right of the second level, if you replace:
ul ul, ul ul ul
for
ul ul ul
Demo: http://jsfiddle.net/QKkg4/
Is that what your're after?
Is there any CSS selector to attach some style to the numerical part of an ordered list only?
I have HTML like:
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
Which should output:
1.a
2.b
3.c
I need to make 1., 2. and 3. bold, while leaving a, b, and c regular.
I am aware of the <span> workaround...
using The Counter-increment CSS property
ol {
margin:0 0 1.5em;
padding:0;
counter-reset:item;
}
ol>li {
margin:0;
padding:0 0 0 2em;
text-indent:-2em;
list-style-type:none;
counter-increment:item;
}
ol>li:before {
display:inline-block;
width:1.5em;
padding-right:0.5em;
font-weight:bold;
text-align:right;
content:counter(item) ".";
}
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
A new ::marker pseudo-element selector has been added to CSS Pseudo-Elements Level 4, which makes styling list item numbers in bold as simple as
ol > li::marker {
font-weight: bold;
}
It is currently supported by Firefox 68+, Chrome/Edge 86+, and Safari 11.1+.
Another easy possibility would be to wrap the list item content into a <p>, style the <li> as bold and the <p> as regular. This would be also preferable from an IA point of view, especially when <li>s can contain sub-lists (to avoid mixing text nodes with block level elements).
Full example for your convenience:
<html>
<head>
<title>Ordered list items with bold numbers</title>
<style>
ol li {
font-weight:bold;
}
li > p {
font-weight:normal;
}
</style>
</head>
<body>
<ol>
<li>
<p>List Item 1</p>
</li>
<li>
<p>Liste Item 2</p>
<ol>
<li>
<p>Sub List Item 1</p>
</li>
<li>
<p>Sub List Item 2</p>
</li>
</ol>
</li>
<li>
<p>List Item 3.</p>
</li>
</ol>
</body>
</html>
If you prefer a more generic approach (that would also cover other scenarios like <li>s with descendants other than <p>, you might want to use li > * instead of li > p:
<html>
<head>
<title>Ordered list items with bold numbers</title>
<style>
ol li {
font-weight:bold;
}
li > * {
font-weight:normal;
}
</style>
</head>
<body>
<ol>
<li>
<p>List Item 1</p>
</li>
<li>
<p>Liste Item 2</p>
<ol>
<li>
<p>Sub List Item 1</p>
</li>
<li>
<p>Sub List Item 2</p>
</li>
</ol>
</li>
<li>
<p>List Item 3.</p>
</li>
<li>
<code>List Item 4.</code>
</li>
</ol>
</body>
</html>
(Check the list item 4 here which is ol/li/code and not ol/li/p/code here.)
Just make sure to use the selector li > * and not li *, if you only want to style block level descendants as regular, but not also inlines like "foo <strong>bold word</strong> foo."
JSFiddle:
ol {
counter-reset: item;
}
ol li { display: block }
ol li:before {
content: counter(item) ". ";
counter-increment: item;
font-weight: bold;
}
I had a similar issue while writing a newsletter. So I had to inline the style this way:
<ol>
<li style="font-weight:bold"><span style="font-weight:normal">something</span></li>
<li style="font-weight:bold"><span style="font-weight:normal">something</span></li>
<li style="font-weight:bold"><span style="font-weight:normal">something</span></li>
</ol>
Answer https://stackoverflow.com/a/21369918/2526049 from dcodesmith has a side effect that turns all types of lists numeric.
<ol type="a"> will show 1. 2. 3. 4. rather than a. b. c. d.
ol {
margin: 0 0 1.5em;
padding: 0;
counter-reset: item;
}
ol > li {
margin: 0;
padding: 0 0 0 2em;
text-indent: -2em;
list-style-type: none;
counter-increment: item;
}
ol > li:before {
display: inline-block;
width: 1em;
padding-right: 0.5em;
font-weight: bold;
text-align: right;
content: counter(item) ".";
}
/* Add support for non-numeric lists */
ol[type="a"] > li:before {
content: counter(item, lower-alpha) ".";
}
ol[type="i"] > li:before {
content: counter(item, lower-roman) ".";
}
The above code adds support for lowercase letters, lowercase roman numerals. At the time of writing browsers do not differentiate between upper and lower case selectors for type so you can only pick uppercase or lowercase for your alternate ol types I guess.
If you are using Bootstrap 4:
<ol class="font-weight-bold">
<li><span class="font-weight-light">Curabitur aliquet quam id dui posuere blandit.</span></li>
<li><span class="font-weight-light">Curabitur aliquet quam id dui posuere blandit.</span></li>
</ol>
This is an update for dcodesmith's answer https://stackoverflow.com/a/21369918/1668200
The proposed solution also works when the text is longer (i.e. the lines need to wrap): Updated Fiddle
When you're using a grid system, you might need to do one of the following (at least this is true for Foundation 6 - couldn't reproduce it in the Fiddle):
Add box-sizing:content-box; to the list or its container
OR change text-indent:-2em; to -1.5em
P.S.: I wanted to add this as an edit to the original answer, but it was rejected.
You also could put <span style="font-weight:normal"> around a,b,c and then bold the ul in the CSS.
Example
ul {
font-weight: bold;
}
<ul><li><span style="font-weight:normal">a</span></li></ul>
Pretty late answer, but hopefully someone will find this useful
I had a situation like this:
List item
a. List item
Where the first item was <strong>, the sub-element was normal weight and the '1.' just wouldn't bold.
My solution was via jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
if ($('ol').has('li').has('strong')) {
$('ol ').css('font-weight', 'bold');
$('ol > li > ol').css('font-weight', 'normal');
}
});
</script>
Hopefully this helps someone!
I have the following HTML code:
<div>
<ol class="sortable">
<li id="list_1" class="nob"><div>A</div>
<ol>
<li id="list_2"><div>1</div></li>
<li id="list_3"><div>2</div></li>
<li id="list_4"><div>3</div></li>
<li id="list_5"><div>4</div></li>
</ol>
</li>
<li id="list_6" class="nob"><div>B</div>
<ol>
<li id="list_7"><div>1</div></li>
<li id="list_8"><div>2</div></li>
</ol>
</li>
</ol>
</div>
I want the output to be as :
|A|1|2|3|4|B|1|2|
Can anyone help me write the CSS for the same?
Thanks.
Basic solution:
.nob, .nob div, .nob ol, .nob li { display: inline; /* or inline-block */ }
Use inline if you don't need to control vertical margins. Otherwise you should consider using inline-block.
.sortable li, .sortable li div, .sortable li ol {
float:left;
}
I have this list :
<ul class="topnav" id="topnav">
<li><span>community</span>
<ul class="level1">
<li><span>Commun1</span>
<ul class="level1">
</ul>
</li>
</ul>
</li>
<li><span>Events</span>
<ul class="level1">
<li><span>Event1</span>
<ul class="level1">
<li><span>Event2</span>
<ul class="level1"></ul>
</li>
</ul>
</li>
</ul>
</li> the the first ul under community and the first ul under Events
</ul>
I need to access only the first ul with the class level1 Im using In each ul I need to access only
.topnav li > ul
{
//code here
}
I've updated my code still can't access the only the fi
Use like this:
#topnav li:first-child ul
{
// your style
}
See the working demo : http://jsfiddle.net/bqBdn/4/
Note: Your HTML code is little bit buggy, So correct it as I did in this demo. Use proper tagging for ul, li inside main liThanks!
it works for me: jsfiddle demo
ul.topnav li > ul {
color:blue;
}
Try this:
#topnav li ul:first-child
from here
.topnav li > ul.level:first-child
will access only the first ul with a .level class at the first level after the li.
This is because your html is wrong. You can't have an <li /> as a child of another <li />. The browser is correcting the mistake - bringing all the <ul />'s under the initial one to the same level. Your css is working, your html is the problem.
Are you able to change this?